我可以通过 JavaScript 禁用 CSS :hover 效果吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2754546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I disable a CSS :hover effect via JavaScript?
提问by meo
I'm trying to prevent the browser from using the :hovereffect of the CSS, via JavaScript.
我试图:hover通过 JavaScript阻止浏览器使用CSS的效果。
I have set the aand a:hoverstyles in my CSS, because I want a hover effect, if JS isn't available. But if JS isavailable, I want to overwrite my CSS hover effect with a smoother one (using the jQuery color plugin for example.)
我已经在我的 CSS 中设置了a和a:hover样式，因为我想要一个悬停效果，如果 JS 不可用。但是，如果JS是可用的，我想覆盖我的CSS悬停效果更平滑的一个（使用jQuery插件的颜色例如。）
I tried this:
我试过这个：
$("ul#mainFilter a").hover(
function(e){ e.preventDefault(); ...do my stuff... },
function(e){ e.preventDefault(); ...do my stuff... });
I also tried it with return false;, but it does not work.
我也用 尝试过return false;，但它不起作用。
Here is an example of my problem: http://jsfiddle.net/4rEzz/. The link should just fade without getting gray.
这是我的问题的一个例子：http: //jsfiddle.net/4rEzz/。链接应该只是淡出而不会变灰。
As mentioned by fudgey, a workaround would be to reset the hover styles using .css()but I would have to overwrite every single property, specified in the CSS (see here: http://jsfiddle.net/raPeX/1/). I am looking for a generic solution.
正如 fudgey 所提到的，一种解决方法是使用重置悬停样式，.css()但我必须覆盖 CSS 中指定的每个属性（请参阅此处：http: //jsfiddle.net/raPeX/1/）。我正在寻找一个通用的解决方案。
Does anyone know how to do this?
有谁知道如何做到这一点？
PS: I do not want to overwrite every style i have set for the hover.
PS：我不想覆盖我为悬停设置的所有样式。
回答by Paul D. Waite
There isn't a pure JavaScript generic solution, I'm afraid. JavaScript isn't able to turn off the CSS :hoverstate itself.
恐怕没有纯 JavaScript 通用解决方案。JavaScript 无法关闭 CSS:hover状态本身。
You could try the following alternative workaround though. If you don't mind mucking about in your HTML and CSS a little bit, it saves you having to reset every CSS property manually via JavaScript.
不过，您可以尝试以下替代解决方法。如果您不介意在您的 HTML 和 CSS 中稍作改动，那么您就不必通过 JavaScript 手动重置每个 CSS 属性。
HTML
HTML
<body class="nojQuery">
CSS
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
JavaScript
// When jQuery kicks in, remove the nojQuery class from the <body> element, thus
// making the CSS hover styles disappear.
$(function(){}
$('body').removeClass('nojQuery');
)
回答by Kai Noack
Use a second class that has only the hover assigned:
使用仅分配了悬停的第二个类：
HTML
HTML
<a class="myclass myclass_hover" href="#">My anchor</a>
CSS
CSS
.myclass {
/* all anchor styles */
}
.myclass_hover:hover {
/* example color */
color:#00A;
}
Now you can use Jquery to remove the class, for instance if the element has been clicked:
现在您可以使用 Jquery 删除类，例如，如果元素已被单击：
JQUERY
查询
$('.myclass').click( function(e) {
e.preventDefault();
$(this).removeClass('myclass_hover');
});
Hope this answer is helpful.
希望这个回答有帮助。
回答by Josh
This is similar to aSeptik's answer, but what about this approach? Wrap the CSS code which you want to disable using JavaScript in <noscript>tags. That way if javaScript is off, the CSS :hoverwill be used, otherwise the JavaScript effect will be used.
这类似于 aSeptik 的答案，但是这种方法呢？将要禁用的 CSS 代码包装在<noscript>标签中使用 JavaScript 。这样，如果 javaScript 关闭，:hover将使用CSS ，否则将使用 JavaScript 效果。
Example:
例子：
<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>
回答by Stephen P
You can manipulate the stylesheets and stylesheet rules themselves with javascript
您可以使用 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);
Making the attributes !important and making this the very last CSS definition should override any previous definition, unless one is more specifically targeted. You may have to insert more rules in that case.
使属性 !important 并使其成为最后一个 CSS 定义应该覆盖任何以前的定义，除非一个更明确的目标。在这种情况下，您可能需要插入更多规则。
回答by Christopher Altman
I would use CSS to prevent the :hover event from changing the appearance of the link.
我会使用 CSS 来防止 :hover 事件改变链接的外观。
a{
font:normal 12px/15px arial,verdana,sans-serif;
color:#000;
text-decoration:none;
}
This simple CSS means that the links will always be black and not underlined. I cannot tell from the question whether the change in the appearance is the only thing you want to control.
这个简单的 CSS 意味着链接将始终为黑色且没有下划线。我无法从问题中判断外观的变化是否是您唯一想要控制的。
回答by ColdTuna
I used the not()CSS operator and jQuery's addClass()function. Here is an example, when you click on a list item, it won't hover anymore:
我使用了not()CSS 运算符和 jQuery 的addClass()函数。这是一个示例，当您单击列表项时，它将不再悬停：
For example:
例如：
HTML
HTML
<ul class="vegies">
<li>Onion</li>
<li>Potato</li>
<li>Lettuce</li>
<ul>
CSS
CSS
.vegies li:not(.no-hover):hover { color: blue; }
jQuery
jQuery
$('.vegies li').click( function(){
$(this).addClass('no-hover');
});
回答by Shobhit Sharma
I'd recommend to replace all :hoverproperties to :activewhen you detect that device supports touch. Just call this function when you do so as touch().
当您检测到该设备支持触摸时，我建议将所有: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');
}
}
}
}
}
}
回答by meo
Actually an other way to solve this could be, overwriting the CSS with insertRule.
实际上，解决此问题的另一种方法可能是用insertRule.
It gives the ability to inject CSS rules to an existing/new stylesheet. In my concrete example it would look like this:
它提供了将 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
);
Demo with my 4 years old original example: http://jsfiddle.net/raPeX/21/
用我 4 岁的原始示例演示：http: //jsfiddle.net/raPeX/21/
回答by Mottie
Try just setting the link color:
尝试只设置链接颜色：
$("ul#mainFilter a").css('color','#000');
Edit: or better yet, use the CSS, as Christopher suggested
编辑：或者更好的是，使用 CSS，正如克里斯托弗建议的那样
