如何删除：悬停？答案

【问题标题】：How do I remove :hover?如何删除：悬停？
【发布时间】：2009-01-12 19:18:46
【问题描述】：

我的脚本有个小问题。
我想为禁用 Javascript 的客户端在 :hover 上设置一个默认操作，但对于启用了 Javascript 的客户端，我想要另一个操作（实际上...相同的操作，但我想添加一个小的过渡效果）。

那么...我该怎么做呢？我正在使用 jQuery。

【问题讨论】：

【解决方案1】：

对相关元素应用两个类。一个包含悬停行为，一个包含所有其他样式。

然后你就可以使用jquery了

$(element).removeClass('hover');

删除具有悬停行为的类，然后使用您想要的任何内容的方法

$(element).bind('mouseover', function () { doSomething(); });
$(element).bind('mouseout', function () { doSomething(); });

【讨论】：

是的，但是这种方法非常突兀:(我希望不要那么突兀:-s
我必须修改很多代码来实现这一点。但是......我认为反向也可以：添加一个类：D 10x（我头顶上方出现了一道巨大的光线！）

【解决方案2】：

将:hover 后备放在一个仅在禁用javascript 时才加载的样式表中怎么样？

<noscript>
  <link href="noscript.css" rel="stylesheet" type="text/css" />
</noscript>

【讨论】：

很好的答案...我会选择这个。
不错但无效的 XHTML 标记。 -标签必须在head，

【解决方案3】：

这是一个没有 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

【讨论】：

我其实最喜欢这个答案。这是仅使用 javascript 解决问题的唯一答案。谢谢，kingjeffrey！

【解决方案4】：

我认为最好的方法是将:hover 行为作为非javascript 用户的后备，然后使用JQuery 创建mouseover 和mouseout 事件处理程序，为启用javascript 的用户创建不同的效果。

JQuery Javascript Library - Events/mouseover

【讨论】：

【解决方案5】：

这是一个非常古老的问题，但我很想告诉你，modernizr 提供了一种非常好的方法来实现这些回退。

只需在头部包含modernizr，您就可以执行以下操作：

.no-js a:hover {
   set background color and stuff like that
   for cases when no javascript is present
}

另一方面，如果您想以另一种方式执行此操作，并且仅在存在 js 时设置 css

.js a:hover {
   set background color to default
   and the text decoration
}

这与在标记中添加悬停标签或多或少相同的解决方案，但更健壮一些。

【讨论】：

【解决方案6】：

我找到了您的解决方案

基本上，您首先要重新定义您对 CSS 悬停所做的操作。（当然，您可以通过从样式中动态提取信息来做到这一点）然后在 jquery 中使用 mouseover/mouseout 事件做任何你想做的事情

这允许您将 :hover 事件保留在您的 css 中，因为 jquery 将您的原始样式绑定到元素。本质上禁用 :hover 事件。

如果你的 CSS 是：

a.class {
  background-color: #000000;
  background-position: 0 0;
  }
a.class:hover {
  background-color: #ffffff;
  background-position: 100% -50px;
  }

您的 jquery 将类似于：

jQuery("a.class").each(function () {

  var oldBackgroundColor = jQuery(this).css("backgroundColor");
  var oldBackgroundPosition = jQuery(this).css("backgroundPosition");

  jQuery(".class").css({
        'backgroundColor':oldBackgroundColor,
        'backgroundPosition':oldBackgroundPosition
  });

})
.bind("mouseover", function() {

  doSomething();

})
.bind("mouseout", function() {

  doSomething();

})

【讨论】：

【解决方案7】：

You can redraw element after click
function redraw(element) {
if (!element) { return; }

let n = document.createTextNode(' ');
let disp = element.style.display;  // don't worry about previous display style

element.appendChild(n);
element.style.display = 'none';

setTimeout(function(){
    element.style.display = disp;
    n.parentNode.removeChild(n);
}, 100); // you can play with this timeout to make it as short as possible

}

【讨论】：

【解决方案8】：

您可以使用单个 css 规则全局启用整个文档的行为，然后在安装新事件处理程序时在 javascript 的一个语句中禁用该规则。

在你的 html 正文标签中添加一个类：

<html>
  <body class="use-hover">
  ...

css 中的默认行为，比如说悬停时的粗体链接：

body.use-hover a:hover
  font-weight: bold

在你的 js 中，运行时会移除默认行为并执行其他操作：

$(function() {
  $('body').removeClass('use-hover');
  $('a').live('mouseover', function() {
    // Do something when hovered
  }).live('mouseout', function() {
    // Do something after hover is lost
  });
});

【讨论】：

【解决方案9】：

您可以从 document.styleSheets 中删除所有 :hover 样式规则。

只需使用 JavaScript 浏览所有 CSS 样式并删除所有在其选择器中包含“:hover”的规则。当我需要从 bootstrap 2 中删除 :hover 样式时，我会使用此方法。

_.each(document.styleSheets, function (sheet) { 
    var rulesToLoose = []; 
    _.each(sheet.cssRules, function (rule, index) { 
        if (rule.selectorText && rule.selectorText.indexOf(':hover') > 0) { 
            rulesToLoose.push(index);
        }
    });

    _.each(rulesToLoose.reverse(), function (index) {
        if (sheet.deleteRule) {
            sheet.deleteRule(index);
        } else if (sheet.removeRule) {
            sheet.removeRule(index);
        }
    });
});

我确实使用下划线来迭代数组，但也可以使用纯 js 循环编写那些：

for (var i = 0; i < document.styleSheets.length; i++) {}

【讨论】：