jquery - 删除/取消绑定悬停在锚点上

Question

html

<a href="home.html">Home</a>

css

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

现在你可以看到<a>现在在悬停时是红色的。

问题
如何通过 jQuery 删除悬停？
我试过了： $('a').unbind('hover');和$('a').unbind('mouseenter mouseleave')

我开始想为什么它不起作用，不是hover()吗？

Answer 1

由于a:hover不是锚标记上的绑定事件并且只是一个伪类，因此您将无法成功取消绑定 .hover() 事件。

如果你想改变行为，那么你可以做两件事

1. 删除a:hover样式

2. 在锚标记上绑定悬停事件并相应地设置 css。

Answer 2

不，这是一条 CSS 规则，而不是 JavaScript 事件。
更改颜色的最简单方法是通过更强大的 CSS 规则，例如：

a.NoHover:hover {
   color: blue;
}

或者

body a:hover {
   color: blue;
}

Answer 3

您可以添加/删除类并使用 JQuery 进行相应的操作。所以你应该为正常和悬停状态创建类。例如，您可以像这样从元素中删除样式：

$('a').mouseover(function(){
  $(this).removeClass();
});

但我建议您使用以下方法实际添加和删除类：

addClass()
removeClass()

Answer 4

如果您担心它的唯一颜色，这可能会有所帮助。

$('a').each(function() {
   var $this = $(this);
   $this.css('color', $this.css('color'));
 });

元素的style属性将覆盖任何 CSS 选择器中设置的属性。该理论已经过测试并且运行良好。该插件将读取任意 css 属性并将它们设置回来，因此“粘贴”它们。

$.fn.stickCss = function(props) {
  var stick = (props || '').split(/\s+/);
  return this.each(function() {
    var $this = $(this);
    $.each(stick, function(i, prop) {
      $this.css(prop, $this.css(prop));
    });
  });
};

// example usage:
$('a').stickCss('color background-color margin padding');