html中hover有静止的命令,我可以通过JavaScript禁用CSS：hover效果吗？

恐怕没有一个纯JavaScript的通用解决scheme。 JavaScript不能closuresCSS :hover状态本身。

不过你可以尝试下面的替代方法。 如果您不介意在HTML和CSS中进行一些操作，则无需通过JavaScript手动重置每个CSS属性。

HTML

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

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的答案类似，但是这种方法呢？ 在

标签中将使用JavaScript禁用的CSS代码 。 这样如果closures了javaScript，CSS :hover将被使用，否则JavaScript效果将被使用。

例：

只是一个较短的答案…

使用仅分配有hover的第二个类：

HTML

My anchor

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

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

我使用了not() CSS运算符和jQuery的addClass()函数。 这是一个例子，当你点击一个列表项时，它不会再hover：

例如：

HTML

• Onion
• Potato
• Lettuce

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