1

我有以下菜单结构：

<ul class="menu">
  <li class="first leaf"><a href="#" title="" class="active">Home</a></li>
  <li class="expanded"><a href="#" title="Products">Products</a>
    <ul class="menu">
      <li class="first leaf"><a href="#">Product 1</a></li>
      <li class="leaf"><a href="#">Product 2</a></li>
      <li class="leaf"><a href="#">Product 3</a></li>
      <li class="last leaf"><a href="#">Product 4</a></li>
    </ul
  <li>
  <li class="expanded"><a href="#" title="Products">Products Level 2</a>
    <ul class="menu">
      <li class="first leaf"><a href="#">Product 5</a></li>
      <li class="leaf"><a href="#">Product 6</a></li>
    </ul>
  <li>
</ul>

我想要做的是，当Product 1项目悬停时，我希望父Products菜单项发生变化。

我已经研究了 CSS 来做到这一点，通过尝试基于孩子来定位父母，但似乎无法做到。

这可以在jQuery中完成吗？

谢谢

4

6 回答 6

0 
$('.menu > .expanded > .menu > li > a').on('hover', function(e) {
    var li = $(this).closest('.expanded').find('a:first');
    if (e.type == 'mouseenter') {
        li.css('background', '#f00');
    } else {
        li.css('background', '#fff');
    }
});

演示

或者

$('li.leaf').on('hover', function(e) {
   var li = $(this).closest('.expanded').find('a:first');
   if(e.type == 'mouseenter') li.css('background', '#fff');
   else li.css('background', '#f00');
});

演示

根据您的编辑

您的 HTML 标记有一些问题，请解决它们。

我认为我的代码也适用于新妆容。

看这里

于 2012-05-29T18:33:13.993 回答
0 
$("a:contains('Product 1')").hover(function(){
   $('[title="Products"]').addClass('changed');
})

http://jsfiddle.net/ULALG/

于 2012-05-29T18:39:39.627 回答
0

试试这个：

$('li.first').hover(function() {
    $(this).closest('li.expanded').children('a').css('font-weight', 'bold');
}, function() {
    $(this).closest('li.expanded').children('a').css('font-weight', 'normal');
});​

jsFiddle 示例。

该示例只是在将鼠标悬停在产品 1 列表项上时将产品菜单加粗，但您可以做任何您需要做的事情。

于 2012-05-29T18:42:03.560 回答
0

这取决于您希望如何更改它？

编辑：更新了 2 li 子菜单的DEMO

只需使用 CSS：

ul.menu li { display: inline-block; margin: 3px;  padding: 5px; vertical-align: top;}

ul.menu li:hover { font-weight: bold; background-color: green; }

ul.menu, ul.menu li:hover ul, ul.menu li:hover ul.menu li { font-weight: normal; background-color: white; }
ul.menu li:hover ul.menu li:hover { font-weight: bold; background-color: green; }

演示- 字体和背景

演示- 只是字体

于 2012-05-29T18:47:55.033 回答
0

你的意思是这样的吗？

http://jsfiddle.net/KZdkV/16/

$('.hoverchange').hover(function() {
    $('.expanded').replaceWith('<a href="#" title="NewStuff">NewStuff</a>');
});​

不过，我改变了一些你的课程。查看链接以了解差异。

于 2012-05-29T18:48:36.533 回答
0

我建议在第一个 ul 中添加一个 id，然后像这样：

$(".menu .menu li a").hover(
    function() {
        $(this).parents("#root > li").addClass('test');
    },
    function() {
        $(this).parents("#root > li").removeClass('test');
    }     
);

在jsFiddle上

于 2012-05-29T18:55:15.737 回答