Question

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

当用户将鼠标悬停在任何其他项目上时，我只是尝试使用类名“有效”来更改菜单项的背景颜色。

Answer 1

试试这个：

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

Answer 2

这是使用.hover（）

的方法

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

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

Answer 3

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

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

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

Answer 4

由于您已经将此功能限定为#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");
});

Answer 5

我的想法是在悬停子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

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

5 个答案: