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 pseudo class，如下所示：

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

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

还值得注意的是，在您的代码中，如果您将脚本标记放在包含a元素的HTML之前，它将无效（see here）。这是因为脚本运行时，元素不存在。考虑让代码在JQuery document ready event上运行。 Example here

Answer 2

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

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

但是你应该通过添加：

来使用CSS类来管理悬停（如果可能的话）

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