Question

我有以下菜单结构：

<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中完成吗？

由于

Answer 1

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

<强> DEMO

或

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

<强> DEMO

根据你的编辑

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

我认为我的代码也在使用新化妆。

参见 here

Answer 2

$("a:contains('Product 1')").hover(function(){
   $('[title="Products"]').addClass('changed');
})

http://jsfiddle.net/ULALG/

Answer 3

试试这个：

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

该示例仅在将鼠标悬停在产品1列表项上时加粗产品菜单，但您可以执行任何您需要的操作。

Answer 4

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

修改：针对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; }

DEMO - 字体＆amp;背景

DEMO - 只是字体

Answer 5

你的意思是这样吗？

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

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

我改变了你的课程。看看差异的链接。

Answer 6

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

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

jsFiddle

悬停在孩子身上时更改父母

6 个答案: