我试图通过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:我不想覆盖我为悬停设置的所有样式。
发布于 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');
)
发布于 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');
});
希望这个答案是有帮助的。
发布于 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
复制相似问题