javascript - 更改悬停在列表项上方的列表项背景图像？

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/