当前位置:  开发笔记 > 前端 > 正文

使用jQuery在悬停下划线

如何解决《使用jQuery在悬停下划线》经验,为你挑选了2个好方法。

我用过这个方法

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

有更优雅的方法吗?(单行)



1> Jeremy Ruten..:

为什么不使用CSS呢?

#dvTheatres a {
    text-decoration: none;
}

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



2> nickf..:

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

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

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

您的jQuery解决方案的工作原因是因为通过参数应用样式具有非常高的特异性.

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

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

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

如果你真的想坚持使用jQuery,你的方法很好,可能是最优雅的方式(使用jQuery).

推荐阅读
k78283381
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有