Question

你有一个看起来像这样的菜单

<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背景图像。

例如，当用户将鼠标悬停在Beauty链接上时，将css bg-imge更改为x，如果用户将鼠标悬停在香水上，则将css bg-image转换为y。

任何帮助都会很棒

由于

Answer 1

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

此解决方案将允许任何大小列表，并且需要包含所需背景图像路径的字符串数组，数组应与列表线性相关，这意味着数组[0]应该是列表中elem 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)")
})

最后是jsfiddle的概念证明 http://jsfiddle.net/k8ywX/

Answer 2

使用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","");
        });
});

Answer 3

HTML：

<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>

JavaScript的：

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

现场演示： http://jsfiddle.net/simevidas/hcu3h/2/

Answer 4

尝试这样的事情：

<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>

JQuery Select 1st，2nd＆amp;李的第三个环节

4 个答案: