我可以通过JavaScript禁用CSS：hover效果吗？
我试图通过JavaScript来阻止浏览器使用CSS的:hover效果。
我已经在我的CSS中设置了a和a:hover样式，因为我想要一个hover效果，如果JS不可用的话。 但是，如果JS 是可用的，我想覆盖我的CSShover效果更顺利（例如使用jQuery颜色插件）。
我试过这个：
$("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()重置hover样式，但是我必须覆盖CSS中指定的每个属性（请参阅： http : //jsfiddle.net/raPeX/1/ ） 。 我正在寻找一个通用的解决scheme。
有谁知道如何做到这一点？
PS：我不想覆盖每个我为hover设定的风格。
恐怕没有一个纯JavaScript的通用解决scheme。 JavaScript不能closuresCSS :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'); )
你可以使用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定义应该覆盖以前的任何定义，除非更具体的定位。 在这种情况下，你可能不得不插入更多的规则。
这与aSeptik的答案类似，但是这种方法呢？ 在<noscript>标签中将使用JavaScript禁用的CSS代码<noscript> 。 这样如果closures了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>
只是一个较短的答案…
使用仅分配有hover的第二个类：
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'); });
希望这个答案是有帮助的。
我会使用CSS来防止：hover事件改变链接的外观。
a{ font:normal 12px/15px arial,verdana,sans-serif; color:#000; text-decoration:none; }
这个简单的CSS意味着链接将始终是黑色的，而不是下划线。 我不能从这个问题中看出外观的改变是否是你想要控制的唯一的东西。
尝试设置链接颜色：
$("ul#mainFilter a").css('color','#000');
编辑：或者更好，使用CSS，正如克里斯托弗所build议的那样
其实解决这个问题的其他方法可能是用insertRule覆盖CSS。
它提供了将CSS规则注入现有/新样式表的function。 在我的具体例子中，它看起来像这样：
//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/
我使用了not() CSS运算符和jQuery的addClass()函数。 这是一个例子，当你点击一个列表项时，它不会再hover：
例如：
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'); });
我build议将所有:hover属性replace为:active当您检测到设备支持触摸时: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'); } } } } } }
