Question

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

所以......我怎么能这样做？我正在使用jQuery。

Answer 1

将两个类应用于relvant元素。一个包含悬停行为，一个包含所有其他样式。

然后您可以使用jquery

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

使用悬停行为删除类的方法，然后使用

应用您想要的任何内容

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

Answer 2

如果将:hover后退放在仅在禁用javascript的情况下加载的样式表中呢？

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

Answer 3

这是一个没有黑客攻击类的解决方案：

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

Answer 4

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

JQuery Javascript Library - Events/mouseover

Answer 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
}

与向标记添加悬停标记或多或少相同的解决方案，但更加健壮。

Answer 6

我找到了你的解决方案

基本上你是从重新定义你用css悬停所做的事情开始的。（当然你会通过从样式中动态提取信息来做到这一点）然后使用mouseover / mouseout事件在jquery中执行任何操作

这允许你在你的css中保留：hover事件，因为jquery将原始样式绑定到元素。实质上禁用了：悬停事件。

如果你的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();

})

Answer 7

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

在html body标签中添加一个类：

<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
  });
});

Answer 8

您可以从document.styleSheets中删除所有：悬停样式规则。

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

_.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++) {}

Answer 9

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

}

如何删除：悬停？

9 个答案: