更改列表项目上方的列表项目背景图像？

Question

我在HTML中有一个简单的无序项目列表。我正在使用CSS将背景图像应用于列表项。我想要做的是更改所有列表项目上的背景图像，超出鼠标指向的项目。

例如： 如果我将鼠标指向列表项目＃3，则项目1和2应该更改背景图像。

在CSS中是否有一种聪明的方法可以做到这一点，或者我需要使用javascript来完成这项工作吗？

Answer 1

你可以用jQuery做这样的事情

var img = "//image";

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

示例：http://jsfiddle.net/jasongennaro/xZpdD/1/

Answer 2

因为您希望更改列表中的特定数量的项目，所以这将是动态的。 这意味着你需要使用JavaScript，因为CSS无法弄清楚当前悬停项目的“上方”。