Changing list item background image above the list item being hovered on?

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?

---

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/

---

Because you you want a certain number of items in the list to be changed this would be dynamic. Which means that you would need to use JavaScript, as CSS would not be able to figure out what is "above" the current hovered item.