javascript - Javascript - 悬停时的 addClass() 不起作用

Question

html

<ul class="navBarExtended">
   <li><a href="#">Link</a></li>
</ul>

css

.onHover{
text-decoration: underline;
 }

javascript

$("ul.navBarExtended li a").hover(
    function(){
        $(this).addClass("onHover");
    },
    function(){
        $(this).removeClass("onHover");
 });    

我正在尝试将“onHover”类添加到元素上，特别是一个链接，但它似乎不起作用..那么您认为问题可能出在哪里？

Answer 1

更好的解决方案可能是像这样使用:hover伪类：

ul.navBarExtended li a:hover {
   text-decoration: underline;
}

但是，您的原始代码似乎确实有效（假设您已将a元素的默认 CSS 设置为没有下划线）：http: //jsfiddle.net/jaypeagi/wSG4s/

还值得注意的是，在您的代码中，如果您将 script 标签放在包含a元素的 HTML 之前，它将不起作用（请参阅此处）。这是因为当脚本运行时，元素不存在。考虑让您的代码在JQuery 文档就绪事件上运行。这里的例子。

Answer 2

我认为那是因为默认情况下a标签已经有了text-decoration. 只需添加额外的 css 以将其默认设置为 none：

ul.navBarExtended li a {
    text-decoration: none;
}

但是你真的应该只使用一个 CSS 类来管理悬停（如果可能的话），通过添加：

ul.navBarExtended li a:hover {
    text-decoration: underline;
}