我可以通过JavaScript禁用CSS :hover效果吗？
我试图通过JavaScript阻止浏览器使用CSS的:hover效果。
我在我的CSS中设置了a和a:hover样式，因为如果JS不可用，我想要一个悬停效果。但如果JS可用，我想用更平滑的效果覆盖我的CSS hover效果(例如使用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()重置悬停样式，但我必须覆盖在CSS中指定的每个属性(参见此处：http://jsfiddle.net/raPeX/1/ )。我正在寻找一个通用的解决方案。
有人知道怎么做吗？
PS:我不想覆盖我为悬停设置的所有样式。
回答 9
Stack Overflow用户
发布于 2010-05-05 07:20:06
恐怕没有一个纯粹的JavaScript通用解决方案。JavaScript本身不能关闭CSS :hover状态。
不过，您可以尝试以下替代解决方法。如果你不介意在你的超文本标记语言和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');
)Stack Overflow用户
发布于 2014-09-25 02:30:33
使用仅指定了悬停的第二个类：
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');
});希望这个答案是有帮助的。
Stack Overflow用户
发布于 2010-05-05 07:02:44
您可以使用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定义应该覆盖任何以前的定义，除非有一个更有针对性的定义。在这种情况下，您可能需要插入更多规则。
https://stackoverflow.com/questions/2754546
复制相似问题