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 .