用 jQuery 覆盖 a:hover？答案

【问题标题】：Override a:hover with jQuery?用 jQuery 覆盖 a:hover？
【发布时间】：2010-07-18 23:50:45
【问题描述】：

我已经用 css 定义了一个<a> 标签。我正在尝试停止 :hover 标记上的默认样式表 a 更改。如何在 Jquery 中禁用 a 标签上的悬停更改？

【问题讨论】：

标签： jquery

【解决方案1】：

以下解决方案的现场演示：http://jsbin.com/umiru

我能想到的最简单的方法就是改变：

a:hover { ... }

进入

a.someClass:hover { ... }

然后通过jQuery的方法添加/删除.someClass：

$(this).addClass("someClass");    // activates css rules for :hover
$(this).removeClass("someClass"); // deactivates css rules for :hover

【讨论】：

你的意思是你的样式表有a:hover { color:red }或类似的东西吗？
zsharp - 我提供的解决方案有效。请参阅我的解决方案顶部包含的链接以进行演示。
这是一个绝妙的主意！谢谢！您可以添加 !important 以确保样式设置文档的样式。

【解决方案2】：

这是一个没有 hack 类的解决方案：

CSS：

a {color: blue;}
a:hover {color: red;}

jQuery（使用jQueryUI 为颜色设置动画）：

$('a').hover( 
  function() {
    $(this)
      .css('color','blue')
      .animate({'color': 'red'}, 400);
  },
  function() {
    $(this)
      .animate({'color': 'blue'}, 400);
  }
);

demo

【讨论】：

【解决方案3】：

最简单的方法是为特定的 a 标签创建一个新的 CSS 规则。类似的东西

a.linkclass:hover {color:samecolor}

如果你必须使用JQuery来覆盖默认样式，你必须在悬停状态下手动添加css规则，如下所示：

$('a.linkclass').hover(function(){
    $(this).css({'color':'samecolor'});
});

希望有帮助

【讨论】：

【解决方案4】：

只需定义您的 CSS 而不使用“a:hover”

a { color: #fffff }

此 CSS 将覆盖 a:link、a:hover、a:visited 和 a:active。

【讨论】：