如何使用jQuery更改悬停时的背景颜色

<div> 
    <div id="nav"> 
    <ul> 
     <li><a class="active" href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </div> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#nav li a").hover( 
     function() { $(this).parent('ul').parent('li').find('a.active').css('background-color', 'Red'); } 
    ); 
    }); 
    </script> 
</div>

我只是试图在用户将鼠标悬停在任何其他项目上时更改菜单项的背景颜色，使用类名“活动”。如何使用jQuery更改悬停时的背景颜色

来源

2012-06-17 Jay

就试试这个：

$(this) 
     .parent() // jump to li 
     .parent() // jump to ul 
     .find('li a.active') // find a.active 
     .css('background-color', 'Red'); // apply css

但我认为你可以简单地做：

$(document).ready(function() { 
    $("#nav li a").hover(function() { 
     $('li a.active').css('background-color', 'Red'); 
    }, function() { 
     // if you want to remove background 
     // on mouse out then uncomment below line 
     //$('li a.active').css('background-color', 'transparent'); 
    }) 
});

DEMO

来源

2012-06-17 03:45:00 thecodeparadox

''标签没有兄弟姐妹是''在OP标记 – charlietfl

标签，这是非常接近了什么我正在尝试去做，除非我不想改变我徘徊的项目的背景，但是该项目具有“活动”类。因此，如果我将鼠标悬停在“联系人”上，家庭将获得红色背景。 – Jay

@Jay请检查更新演示 – thecodeparadox

问题是UL不是<a>父。使用parents()或closest()。眼前的父母是LI

http://api.jquery.com/parents/

http://api.jquery.com/closest/

来源

2012-06-17 03:46:37 charlietfl

带盖的'红'可能是问题。此外，在悬停完成后，没有提到你想要做什么。随着你的代码现在，它永远不会变回来。使用类更改是最常见的方法，它更容易重置。 codeparadox已经编辑了他的版本约15次，他会找到一个解决方案 – charlietfl

这里的方式与.hover做到这一点（）

http://jsfiddle.net/nickadeemus2002/ePDZH/

我添加的代码来处理hoverOut为好，因为我假设你只想在用户通过链接时显示红色背景。以任何你想要的方式编辑演示。

来源

2012-06-17 03:49:53 chrisvillanueva

由于您已将此功能作用于#nav div，因此可以通过将.active锚定标记搜索到该容器的范围来简化所有操作。

// cache the jquery object 
var $navDiv = $("#nav"); 

$("#nav li a").hover(function() { 
    $navDiv.find("a.active").css("background-color", "red"); 
});

这将设置背景颜色，一旦你将鼠标悬停在任何菜单项，但是当你的鼠标离开菜单项（不再徘徊）背景将保持红色。我建议在悬停处理程序函数内部的.active锚定标记上切换类名称。

//cache the jquery object 
var $navDiv = $("#navDiv"); 

$("#nav li a").hover(function(){ 
    $navDiv.find("a.active").toggleClass("redBackground"); 
});

来源

2012-06-17 04:13:15 awbergs

我的想法是一类over添加到#nav盘旋而孩子a元素，然后用CSS样式相应。

的JavaScript：（需要的jQuery）

(function($){ 

    $nav = $("#nav"); 
    $nav.on("mouseenter", "a", function(){ 
    $nav.toggleClass("over"); 
    }).on("mouseleave", "a", function(){ 
    $nav.toggleClass("over"); 
    }); 

})(jQuery);

演示：jsfiddle.net/Marcel/m8jQv/1

来源

2012-06-17 04:37:49 Marcel

如何使用jQuery更改悬停时的背景颜色

回答

相关问题