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

我试图阻止浏览器通过JavaScript使用CSS的

：hover

效果

我在CSS中设置了

a

和

a:hover

样式，因为如果JS不可用，我想要一个悬停效果。但是如果JS可用，我想用更平滑的效果覆盖我的CSS悬停效果（例如使用jQuery颜色插件）

我试过这个：

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

我还尝试了

returnfalse，但它不起作用

以下是我的问题的一个示例：。链接应该只是淡出而不会变灰

正如fudgey所提到的，一种解决方法是使用
.css（）
重置悬停样式，但我必须覆盖css中指定的每个属性（请参见此处：）。我正在寻找一个通用的解决方案

有人知道怎么做吗

PS:我不想覆盖我为悬停设置的所有样式。
我会使用CSS防止：hover事件更改链接的外观

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

这个简单的CSS意味着链接将始终是黑色的，并且没有下划线。我无法从这个问题判断外观的变化是否是您想要控制的唯一事情。
尝试只设置链接颜色：

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

编辑：或者更好地使用CSS，正如Christopher所建议的那样
您可以使用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);

制作属性！重要的是，将此作为最后一个CSS定义应该覆盖任何以前的定义，除非有更明确的目标。在这种情况下，您可能需要插入更多规则。
恐怕没有一个纯JavaScript通用解决方案。JavaScript无法关闭CSS
：hover
状态本身

不过，您可以尝试以下替代解决方法。如果你不介意在你的HTML和CSS中乱搞一点，那么你就不用通过JavaScript手动重置每个CSS属性了

HTML
JavaScript
//当jQuery启动时，从元素中删除nojQuery类，因此
//使CSS悬停样式消失。
$（函数（）{}
$（'body'）.removeClass（'nojQuery'）；
)
这与aSeptik的答案类似，但这种方法怎么样？将要使用JavaScript禁用的CSS代码包装在
标记中。这样，如果禁用javaScript，将使用CSS
：hover
，否则将使用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>


ul#主过滤器a：悬停{
/*这里有一些CSS属性*/
}
$（“ul#主过滤器a”）。悬停(
函数（o）{/*…做你的事…*/}，
函数（o）{/*…做你的事…*/}）；
使用仅指定了悬停的第二个类：

HTML

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

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

JQUERY

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

希望这个答案有帮助。
事实上，解决这个问题的另一种方法是，用

它提供了将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
);

//在文档中创建一个新的'style'元素
变量表=（函数（）{
var style=document.createElement（“样式”）；
//网络工具包黑客：(
style.appendChild（document.createTextNode（“”）；
//将元素添加到页面中
document.head.appendChild（样式）；
返回样式表；
})();
//将实际规则添加到其中
sheet.insertRule(
“ul#mainFilter a:hover{color:#0000EE}”，0
);

演示我4岁的原始示例：
我使用了
not（）
CSS操作符和jQuery的
addClass（）
函数。下面是一个示例，当您单击列表项时，它将不再悬停：

例如：

HTML

jQuery

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

当您检测到设备支持触摸时，我建议将所有
：hover
属性替换为
：active
。当您这样做时，只需调用此函数作为
touch（）

如果JS在客户端上不可用，则有一个：hover效果很好。但是如果是，我需要覆盖它。我在css中设置了一个：hover类，只是想禁用它。@meo：您不能禁用css psuedo类，但可以通过将所有链接样式设置为具有相同的外观/参数来覆盖它。这个答案和我的答案都是do这，只是以不同的方式。我已经做了一个例子。它可以工作，但这样做有点愚蠢。我必须检索每个CSS值并将它们添加为样式？一定有更好的方法。我不想这样做。但是+1对于hintHi Meo，不，不，不，我上面的代码是针对一个特定的链接，因为这是我认为你想要的。你可以如果这就是你的意思，或者你是说页面上的每个链接都是不同的颜色？我已经用注释更新了你的演示，向你展示了我的意思：我已经明白了，谢谢你。但问题是，我的鼠标悬停时不仅仅是颜色变了，有时是颜色变了背景，边框，有时甚至是线条高度。这就是为什么我更容易阻止悬停，覆盖每一个悬停效果的原因。这个想法的部分补丁：你可以创建css一个规则来选择
a.jsOverride:hover
，覆盖所有css特征，所以js只需要要在页面加载时将
jsOverride
类添加到所有链接中…或者您可以将所有noscript规则放在一个样式表中，然后从javascript中禁用样式表。或者将noscript样式表
标记放在
元素中？这样可以工作，对吗？或者删除“有问题的”元素规则：即使是IE5也能做到。它的方法调用不同，但应该可以工作：。我没有检查其他浏览器，但我猜所有现代浏览器都实现了该标准。在Firefox中，我得到
错误：操作不安全<
 .myclass { 
   /* all anchor styles */
 }
 .myclass_hover:hover {
   /* example color */
   color:#00A;
 }

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

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

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

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

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

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