Question

I’ve got a simple unordered list of items in HTML. I am using CSS to apply a background image to the list items. What I’d like to do is change the background image on all list items ABOVE the item on which the mouse is pointing.

For example:
If I point my mouse at list item #3, items 1 and 2 should change background images.

Is there a clever way to do this in CSS or would I need javascript to make this work?

Answer 1

You could do something like this with jQuery

var img = "//image";

$('#tester li').hover(function(){
    $(this).prevAll().css('background-image','url(' + img + ')'); 
    },
    function(){
       $(this).prevAll().css('background-image','none');
    }
);

Example: http://jsfiddle.net/jasongennaro/xZpdD/1/