如何使用 jquery 在通常使用 css 完成的链接上实现悬停效果：悬停以更改链接的颜色答案

【问题标题】：How do I use jquery to achieve hover effect on a link that is normally done with css :hover to change the link's color如何使用 jquery 在通常使用 css 完成的链接上实现悬停效果：悬停以更改链接的颜色
【发布时间】：2011-11-08 01:37:45
【问题描述】：

如何使用 jquery 在通常使用 css :hover 关闭的链接上实现悬停效果，所以当我将鼠标悬停在链接上时，它会变为不同的颜色，当我的鼠标离开链接时，它会返回颜色以前有吗？

编辑我的链接有一个内联样式来设置它的颜色，所以我尝试添加和删除它们不起作用的类，似乎新添加的 css 类无法覆盖内联样式。

【问题讨论】：

使这项工作起作用的是格里格斯对添加“！important”到添加的css类的评论，然后覆盖发生了。谢谢！

标签： jquery hover

【解决方案1】：

使用 mouseenter 和 mouseleave 事件。

$("#linkname").mouseenter(function(){
$(this).addClass("highlight");
});

$("#linkname").mouseleave(function(){
$(this).removeClass("highlight");
});

鼠标悬停，鼠标移出也可以。

对于链接，您可以使用带有 # 的 id 或带有 . 的类名。

所以

这样你就可以使用了；

$("#anchorid").mouseleave(

或

$(".anchorclass").mouseleave(

【讨论】：

感谢您的帮助。我忘了提到我的链接有一个设置颜色的内联样式，所以我尝试添加和删除它们不起作用的类，似乎新添加的 css 类无法覆盖内联样式。
对内联样式使用 removeAttr()
或使用 .css(propertyName, value)。这会比 removeAttr()
这么少的代码，为什么不直接使用hover()函数呢？
@ali，可以，而且可能更合适。

【解决方案2】：

一个简单的方法就是使用jQuery.hover():

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

或

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

【讨论】：

感谢您的帮助。通过使用文本装饰它可以工作，但我更喜欢让我卡住的颜色变化，因为我有一个内联样式来设置它的颜色，jquery 添加的 css 类似乎无法覆盖
@ray247 使用类名并在类样式中设置“颜色：红色！重要”。因此，然后使用此答案中的第一行来添加和删除类。
不推荐，但您可以使用 !important 指令强制覆盖。如果您确实使用 !important ，请记住没有什么会覆盖它。如果您对内联 css 没问题，那么只需按照 ray 推荐的方式添加颜色即可。
最后一件事，因为我认为 ray247 可能会从中受益。不鼓励使用!important，因为它破坏了 CSS 中的继承。 Css 更加重视更完整定义的路径，因此您也可以使用它来覆盖示例 div#outterwrapper div.links a {} 将覆盖简单的样式 div.links a {} 或 a {}。样式元素（甚至样式表）出现的顺序也决定了覆盖。 Firebug 在确定什么覆盖什么方面非常有用。层次结构是样式表第 3 个，页内样式第 2 个，行内样式第 1 个，!important 覆盖所有。