JQuery选择第一、第二和；李中的第三环

嗨，有这样的菜单吗

<div id="products_menu" class="span-9 last">
 <ul>
   <li><a href="#">beauty</a></li>
   <li><a href="#">fragrence</a></li>
   <li><a href="#">at home</a></li>
 </ul>
</div>

我想使用jquery根据其中一个链接的悬停来更改主div的CSS背景图像

例如，当用户悬停在美容链接上时，将css bg图像更改为x；如果用户悬停在香水上，则将css bg图像更改为y

任何帮助都会很好

---

谢谢

试试这样的方法：

<div id="products_menu" class="span-9 last">
 <ul>
   <li class="a"><a href="#">beauty</a></li>
   <li class="b"><a href="#">fragrence</a></li>
   <li class="c"><a href="#">at home</a></li>
 </ul>
</div>
<script>
$("li.a").hover(function(){
     $("#products_menu").css("background-image", "url(/myimage.jpg)");
});

$("li.b").hover(function(){
     $("#products_menu").css("background-image", "url(/myimage1.jpg)");
});

$("li.c").hover(function(){
     $("#products_menu").css("background-image", "url(/myimage2.jpg)");
});

</script>

$（“li.a”）.hover（函数（）{
$（“产品菜单”）.css（“背景图像”，“url（/myimage.jpg）”）；
});
$（“li.b”）.hover（函数（）{
$（“产品菜单”）.css（“背景图像”，“url（/myimage1.jpg）”）；
});
$（“li.c”）.hover（函数（）{
$（“产品菜单”）.css（“背景图像”，“url（/myimage2.jpg）”）；
});

坐在这里上课有点无聊，我决定如果有一个真正的解决方案，而不是“添加ID”并使用常见的JQuery解决方案，那么对你和每个人都会更有用，所以我们开始吧

此解决方案将允许任何大小的列表，并需要一个字符串数组，其中包含所需背景图像的路径。该数组应与列表线性相关，这意味着数组[0]应为列表中元素1的图像，依此类推

现在是代码。幸运的是，有了这个解决方案，您不必更改任何html

var backgroundImages = ["path_to_bg_1", "path_to_bg_2", "path_to_bg_3", "path_to_bg_4"];
$("#products_menu li").hover(function () {
    $("#products_menu").css("background", "url("+backgroundImages[$(this).index()]+")")
}, function () {
    $("#products_menu").css("background", "url(PATH_TO_DEFAULT)")
})

最后是JSFIDLE的概念证明

---

使用asawyer代码并修改它

$(document).ready(function () {
    var backgrounds = ["background1","background2","background3"];
    $("#products_menu ul li").hover(
        function(){
            var ind = $("#products_menu ul li").index(this);
            $(this).parent().parent().css({"background-image" : "url("+backgrounds[ind]+")"});
        },
        function (){
            $(this).parent().parent().css("background","");
        });
});

HTML:

---

现场演示：

谢谢。但是也要写下你的答案。。也许你的效率更高（太晚了）是的，我们做到了。但是你的更好：（代码比我想做的要好。数据属性是html5的东西还是自定义的？@mcgrailm.jQuery的data（）方法能够读取这些数据-*属性。

<div id="products_menu" class="span-9 last">
    <ul>
        <li><a href="#" data-bgcolor="orange">beauty</a></li>
        <li><a href="#" data-bgcolor="yellow">fragrence</a></li>
        <li><a href="#" data-bgcolor="pink">at home</a></li>
    </ul>
</div>

$('a', '#products_menu').bind('mouseenter mouseleave', function(e) {
    var c = e.type == 'mouseenter' ? $(this).data('bgcolor') : '';
    $(this).closest('div').css('background-color', c);
});