我可以通过JavaScript禁用CSS：hover效果吗？

99

我试图阻止浏览器:hover通过JavaScript 使用CSS 的效果。

我在CSS中设置了a和a:hover样式，因为如果JS不可用，我希望获得悬浮效果。但是，如果有可用的JS ，我想用更平滑的效果覆盖CSS悬停效果（例如，使用jQuery color插件）。

我尝试了这个：

$("ul#mainFilter a").hover(
     function(e){ e.preventDefault(); ...do my stuff... }, 
     function(e){ e.preventDefault(); ...do my stuff... });

我也尝试过使用return false;，但是它不起作用。

这是我的问题的一个示例：http : //jsfiddle.net/4rEzz/。链接应该淡出而不会变灰。

如fudgey所述，一种解决方法是使用重置悬停样式，.css()但我必须覆盖CSS中指定的每个属性（请参见http://jsfiddle.net/raPeX/1/）。我正在寻找一个通用的解决方案。

有谁知道如何做到这一点？

PS：我不想覆盖为悬停设置的所有样式。

javascript jquery css

— o
source

136

恐怕没有纯粹的JavaScript通用解决方案。JavaScript无法关闭CSS :hover状态本身。

您可以尝试以下替代解决方法。如果您不介意在HTML和CSS中多花钱，可以省去通过JavaScript手动重置每个CSS属性的麻烦。

的HTML

<body class="nojQuery">

的CSS

/* Limit the hover styles in your CSS so that they only apply when the nojQuery 
class is present */

body.nojQuery ul#mainFilter a:hover {
    /* CSS-only hover styles go here */
}

的JavaScript

// When jQuery kicks in, remove the nojQuery class from the <body> element, thus
// making the CSS hover styles disappear.

$(function(){}
    $('body').removeClass('nojQuery');
)

— 保罗·D·威特
source

5

我比noscript解决方案更喜欢此解决方案，因为它可以在CSS完全包含在外部文件中时起作用，并且在CSS第一次加载但JS直到后来才加载的情况下，也可以在页面加载期间使用。如果您在完成加载之前单击某些内容，则使用jQuery来“逐步增强”功能通常会导致页面无法正常工作。即使使用快速链接上的快速浏览器，我也能看到很多。

— Shiny先生和新安宇

@先生。Shiny and New：我同意，我也比我的解决方案更喜欢这个！我不确定为什么我以前没有注意到这一优雅之处

— 乔什（Josh）2010年

3

“与noscript解决方案相比，我更喜欢此解决方案，因为当CSS完全包含在外部文件中时，此<noscript>解决方案才有效” – 解决方案也是如此。您只需将<link>标签放在内<noscript>，而不是<style>标签。我的解决方案确实允许您将所有内容保留在一个样式表文件中，而不是多个文件中。

— Paul D. Waite，2010年

它不是我一直在寻找的东西，但我认为此解决方案是最好的折衷方案！THX你们所有的人

— MEO

您还可以使用不同的名称复制相同的样式，然后使用jquery选择该类中的所有元素，然后删除该类并替换为copy类。

— chepe263 2012年

14

使用仅分配了悬停的第二类：

的HTML

 <a class="myclass myclass_hover" href="#">My anchor</a>

的CSS

 .myclass { 
   /* all anchor styles */
 }
 .myclass_hover:hover {
   /* example color */
   color:#00A;
 }

现在，您可以使用Jquery删除类，例如，如果单击了元素：

JQUERY

 $('.myclass').click( function(e) {
    e.preventDefault();
    $(this).removeClass('myclass_hover');
 });

希望这个答案有帮助。

— 凯诺克
source

3

加1.它不是正统的，但可以很好地破解问题。

— 2015年

11

您可以使用javascript自己操作样式表和样式表规则

var sheetCount = document.styleSheets.length;
var lastSheet = document.styleSheets[sheetCount-1];
var ruleCount;
if (lastSheet.cssRules) { // Firefox uses 'cssRules'
    ruleCount = lastSheet.cssRules.length;
}
else if (lastSheet.rules) { / /IE uses 'rules'
    ruleCount = lastSheet.rules.length;
}
var newRule = "a:hover { text-decoration: none !important; color: #000 !important; }";
// insert as the last rule in the last sheet so it
// overrides (not overwrites) previous definitions
lastSheet.insertRule(newRule, ruleCount);

使属性！important并使之成为最后一个CSS定义应该覆盖任何先前的定义，除非更明确地针对一个定义。在这种情况下，您可能必须插入更多规则。

— 斯蒂芬·P
source

1

或者，您可以将所有noscript规则放在一个样式表中，然后从javascript禁用样式表。

— 肖恩·霍根

2

还是将您的noscript样式表<link>标签放在<noscript>元素中？那行得通，对吧？

— Paul D. Waite，2010年

1

或删除“违规”规则：developer.mozilla.org/en/DOM/stylesheet.deleteRule

— RoToRa 2010年

1

甚至IE5都可以做到。调用该方法的方法有所不同，但应该可以使用：msdn.microsoft.com/zh-cn/library/ms531195%28v=vs.85%29.aspx。我没有检查其他浏览器，但是我猜所有现代浏览器都可以实现该标准。

— RoToRa 2010年

在Firefox中，我得到Error: The operation is insecure.

— Alex W

11

这类似于aSeptik的答案，但是这种方法呢？使用<noscript>标签中的JavaScript包装要禁用的CSS代码。这样，如果关闭javaScript，:hover将使用CSS ，否则将使用JavaScript效果。

例：

<noscript>
<style type="text/css">
ul#mainFilter a:hover {
  /* some CSS attributes here */
}
</style>
</noscript>
<script type="text/javascript">
$("ul#mainFilter a").hover(
     function(o){ /* ...do your stuff... */ }, 
     function(o){ /* ...do your stuff... */ });
</script>

— 乔希
source

4

我使用了not()CSS运算符和jQuery的addClass()函数。这是一个示例，当您单击列表项时，它将不再悬停：

例如：

的HTML

<ul class="vegies">
    <li>Onion</li>
    <li>Potato</li>
    <li>Lettuce</li>
<ul>

的CSS

.vegies li:not(.no-hover):hover { color: blue; }

jQuery的

$('.vegies li').click( function(){
    $(this).addClass('no-hover');
});

— 金枪鱼
source

3

我将使用CSS来防止：hover事件更改链接的外观。

a{
  font:normal 12px/15px arial,verdana,sans-serif;
  color:#000;
  text-decoration:none;
}

这个简单的CSS意味着链接将始终为黑色且不带下划线。我不能从问题中看出外观变化是否是您唯一想控制的东西。

— 克里斯托弗·奥特曼
source

如果客户端上不支持JS，则具有：hover效果是有好处的。但是，如果是这样，我需要覆盖它。我在CSS中设置了一个：hover类，只是想禁用它。

— meo 2010年

@meo：您不能禁用CSS伪类，但是可以通过将所有链接样式设置为具有相同的外观/参数来覆盖它。这个答案和我的答案都以不同的方式做到这一点。

— 莫蒂2010年

3

当您检测到设备支持触摸时，建议将所有:hover属性替换为:active。只需在调用时调用此函数touch()。

function touch() {
  if ('ontouchstart' in document.documentElement) {
    for (var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
      var sheet = document.styleSheets[sheetI];
      if (sheet.cssRules) {
        for (var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
          var rule = sheet.cssRules[ruleI];

          if (rule.selectorText) {
            rule.selectorText = rule.selectorText.replace(':hover', ':active');
          }
        }
      }
    }
  }
}

— 肖比·夏尔马
source

对我来说很棒。谢谢！

— 反转

1

尝试仅设置链接颜色：

$("ul#mainFilter a").css('color','#000');

编辑：或者更好，使用Christopher建议的CSS

— 莫蒂
source

jsfiddle.net/raPeX我已经举了一个例子。它有效，但是这样做有点愚蠢。我将不得不检索每个CSS值并将它们添加为样式？肯定有更好的办法。我不想那样做。但提示为+1

— meo

嗨，我不，我上面的代码针对的是一个特定的链接，因为那是我认为您想要的。您可以通过使用a而不是ul#mainFilter a您的意思来泛化它，或者您是说页面上的每个链接都是不同的颜色？

— 莫蒂2010年

我已经用注释更新了您的演示，以显示我的意思：jsfiddle.net/raPeX/2

— Mottie 2010年

香港专业教育学院已经知道了，谢谢。但是问题是，悬停时不仅会改变颜色，有时还会是背景，边框，甚至行高。这就是为什么对我来说，仅防止悬停会更容易，因为den会覆盖每个悬停效果。

— meo 2010年

此想法的部分修补程序：您可以创建css规则，为其选择a.jsOverride:hover一个覆盖所有css特征的规则，因此js仅需添加该规则jsOverride在页面加载时将该类到所有链接中……

— grossvogel 2010年

1

实际上，解决此问题的另一种方法可能是用覆盖CSS insertRule。

它提供了将CSS规则注入现有/新样式表的功能。在我的具体示例中，它看起来像这样：

//creates a new `style` element in the document
var sheet = (function(){
  var style = document.createElement("style");
  // WebKit hack :(
  style.appendChild(document.createTextNode(""));
  // Add the <style> element to the page
  document.head.appendChild(style);
  return style.sheet;
})();

//add the actual rules to it
sheet.insertRule(
 "ul#mainFilter a:hover { color: #0000EE }" , 0
);

我4岁的原始示例的演示：http : //jsfiddle.net/raPeX/21/

— o
source