Jquery 将鼠标悬停在子对象上时更改父对象

我有以下菜单结构：

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

或


根据您的编辑

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

我认为我的代码也适用于新化妆品

请参见

试试这个：

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


该示例仅在将鼠标悬停在product 1列表项上时加粗products（产品）菜单，但您可以执行任何需要执行的操作。
这取决于您希望如何更改它

编辑：为2 li子菜单更新

仅使用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; }

-字体和背景

-只有字体你是说这样的吗


$（'.hoverchange'）.hover（函数（）{
$（'.expanded'）。替换为（''）；
});​

不过我改变了你的一些课程。查看链接以了解差异。
我建议在第一个ul中添加一个id，然后如下所示：

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

在
上，这几乎就是我所需要的。我已经更新了我的问题，添加了第二个下拉列表。这似乎让jquery做了一些奇怪的事情，我就快到了，只是一个小怪癖，可以在这里看到：-当我将鼠标悬停在
产品上时，它很好，然后我再次将鼠标悬停在它上面，它是灰色的。颜色必须是白色。JS似乎覆盖了这一点。有什么想法吗？@terrid25你从哪里得到灰色的？请澄清好的，当我将鼠标悬停在
产品
上，然后是它下面的项目时，一切正常。当我离开然后再返回时，
Products
的LiNK颜色现在是#777。我需要它是白色的。它应该只有#777在非活动/悬停状态下基于CSS的答案>>我有这个，但我不想改变孩子。将鼠标悬停在子对象上时，只有父对象发生了更改。
$('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');
});​

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

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

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