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

Question

如何使用 jquery 在通常使用 css :hover 关闭的链接上实现悬停效果，因此当我将鼠标悬停在链接上时，它会更改为不同的颜色，当我的鼠标离开链接时，它会返回到之前的颜色？

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

Answer 1

一个简单的方法就是使用 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");});

Answer 2

使用 mouseenter 和 mouseleave 事件。

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

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

mouseover、mouseout 也可以工作。

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

所以

这样你就可以使用；

$("#anchorid").mouseleave(

或者

$(".anchorclass").mouseleave(