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（）事件。

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

删除a:hover个样式
在锚标记上绑定悬停事件并相应地设置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选择器中设置的属性。理论has been tested并且工作正常。这个插件将读取任意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');

移除/取消绑定悬停在锚点上

4 个答案: