Question

我正在尝试做一个基本的下拉菜单。如何在鼠标悬停时更改链接父项的字体颜色？

<ul id="nav">
    <li><a href="#">Parent 01</a></li>
    <li><a href="#">Parent 02 > </a>
        <ul>
            <li><a href="#">Item 01</a></li>
            <li><a href="#">Item 02</a></li>
            <li><a href="#">Item 03</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li><a href="#">Parent 03 > </a>
    <ul>
        <li><a href="#">Item 04</a></li>
        <li><a href="#">Item 05</a></li>
        <li><a href="#">Item 06</a></li>
        <li><a href="#">Item 07</a></li>
    </ul>           
        <div class="clear"></div>
    </li>
    <li><a href="#">Parent 04</a></li>
</ul>



$('#nav li').hover(
    function () {
        $('ul', this).slideDown("slow");

    }, 
    function () {
        $('ul', this).fadeOut("slow");          
    }
);

我试过$('a', this).css("color", "blue");但它会改变每个a的颜色。我只需要更改父菜单项a的颜色。

Answer 1

将这两个添加到您的函数中：

$(this).addClass("hover-item");

和

$(this).removeClass("hover-item");

最好使用CSS类，以便在CSS中定义样式，而不是设置内联样式，这在大多数情况下都是不好的做法。

但请注意，这会将该类直接添加到LI元素而不是A。这将使其更加灵活，因为您可以根据自己的喜好更改LI内容并保持功能不变。并相应地调整CSS。

在您的情况下，CSS应如下所示：

li.hover-item > a
{
    color: #f00; /* adjust colour to your liking */
}

只会在子链接上设置颜色而不是所有后代（这也会改变子菜单中所有链接的颜色）。

仅使用CSS

您是否意识到您可以轻松地将CSS解决方案用于您想要实现的目标？菜单的滑动和淡入仍然会像现在一样完成，但您可以在CSS文件中设置A突出显示：

#nav li
{
    padding: 0;
    ...
}

#nav li a
{
    padding: 3px 5px;
    display: block;
    ...
}

#nav li a:hover
{
    color: #f00; /* adjust colour to your liking */
    ...
}

如果您的LI有填充，我建议您将其删除并添加填充到其中的A（如我的CSS中）。同时将display: block;设置为占用LI的整个可用空间。

如果可能的话，使用仅CSS的解决方案总是比JavaScript更好。

Answer 2

您可以使用

遍历Dom

$(this).parent()

和

$(this).children("li")

对于孩子，您可以选择特定元素，如“li”或“li：first”等

在你的情况下，我会使用一个带有样式的类，然后：

$(this).parent().addClass("HoverClass");

和

$(this).parent().removeClass("HoverClass");

如何选择'this'的子元素？

2 个答案:

仅使用CSS