Question

我使用了方法

$("#dvTheatres a").hover(function (){
        $(this).css("text-decoration", "underline");
    },function(){
        $(this).css("text-decoration", "none");
    }
);

有更优雅的方法吗？（单行）

Answer 1

为什么不使用CSS？

#dvTheatres a {
    text-decoration: none;
}

#dvTheatres a:hover {
    text-decoration: underline;
}

Answer 2

您可能遇到其他CSS规则的问题，这些规则会覆盖您想要的那些规则。即使它在文件中被声明为最后一个，其他声明可能更重要，因此您将被忽略。例如：

#myDiv .myClass a {
    color: red;
}
#myDiv a {
    color: blue;
}

因为第一条规则是更具体，所以它优先。这是一个解释CSS特异性的页面：http://www.htmldog.com/guides/cssadvanced/specificity/

jQuery解决方案的工作原因是因为通过style=""参数应用样式具有很高的特异性。

查找正在应用哪些规则以及哪些规则被其他规则推翻的最佳方法是使用Firefox的Firebug扩展。检查其中的元素并单击CSS选项卡：它将显示正在应用的每个CSS声明，并对被推翻的声明进行删除。

如果您想要一种快速简便的方法来解决您的问题，请尝试以下方法：

#dvTheatres a:hover {
    text-decoration: underline !important;
}

如果你真的想坚持使用jQuery，你的方法很好，可能是最优雅的方法（使用jQuery）。

Answer 3

没有好的答案，但也许你只是在寻找其他选择。一种是使用命名函数（和CSS）来表达意图而不是内置原始指令。

脚本

function toggleUnderline() { $(this).toggleClass('underline') };
$("#dvTheatres a").hover(toggleUnderline, toggleUnderline);

CSS

.underline { text-decoration: underline; }

Answer 4

试一试

$('.my-awesome div a').hover().css('text-decoration', 'none');

使用jQuery在悬停下划线

4 个答案: