jQuery .addClass 不会改变 css

Question

理想情况下，我想将鼠标悬停在菜单中的

上，并突出显示每个

但作为测试，我有以下内容来更改悬停时的类。有什么想法为什么这不起作用？

非常感谢。

.dropdownhoverIn a:hover
{
    background-color: White;
    color: #39C;
}

---

 <form id="form1" runat="server">
        <div id="multiDropMenu">
            <ul id="menu">
                <li><a href="#" id="places">Places</a>
                    <ul id="dropdown1">
                        <li><a href="http://google.com">To Go</a></li>
                        <li><a href="#">To See</a></li>
                    </ul>
                </li>
                <li><a href="#">Transportation</a></li>
            </ul>
        </div>
    </form>

---

$(document).ready(function() {
    $("#menu li").hover(function() {
        $(this).find("ul").find("a").hover(function() {   
            $(this).addClass("dropdownhoverIn"); 
        });
        $(this).find("ul").slideToggle(250);
    });
});

Answer 1

摆脱

$("#menu > li").hover(function() {
    $(this).find("ul a").addClass("dropdownhoverIn");
    $(this).find("ul").slideToggle(250);
});​

类上的“内部”.hover() 赋值和 :hover 伪选择器。

.dropdownhoverIn {
    background-color: White;
    color: #39C;
}​

尝试一下： http://jsfiddle.net/GKZRU/

当您调用 .hover() 函数参数，您分配一个处理程序。没有理由在每次将鼠标悬停在

上时执行此操作。

如果您使用 jQuery 的 .hover()，则 CSS 中并不需要它。如果您希望它存在以实现兼容性，则需要一个单独的 CSS 选择器。

我还将 > 添加到 .hover() 的选择器中，因为我假设您希望它仅在 #menu 的子级上激活。