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

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

4

5 回答 5

3

试试这个：

$(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');
    })
});

演示

于 2012-06-17T03:45:00.047 回答
1

这是一种使用 .hover() 的方法

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

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

于 2012-06-17T03:49:53.310 回答
0

由于您已经将此功能范围限定为 #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-17T04:13:15.927 回答
0

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

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

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

于 2012-06-17T03:46:37.220 回答
0

我的想法是在悬停子元素时添加一个overto类，然后相应地使用 CSS 进行样式设置。#nava

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-17T04:37:49.033 回答