使用jQuery在悬停下划线

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).