meo*_*meo 95 javascript css jquery
我试图阻止浏览器:hover通过JavaScript 使用CSS 的效果.
我在我的CSS中设置了a和a:hover样式,因为如果JS不可用,我想要一个悬停效果.但是,如果JS 是可用的,我要覆盖更平滑一个我的CSS悬停效果(例如使用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:我不想覆盖我为悬停设置的每一种风格.
Pau*_*ite 134
我担心没有纯粹的JavaScript通用解决方案.JavaScript无法关闭CSS :hover状态本身.
您可以尝试以下替代解决方法.如果你不介意在你的HTML和CSS中稍微乱搞,它可以节省你必须通过JavaScript手动重置每个CSS属性.
<body class="nojQuery">
/* 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 */
}
// When jQuery kicks in, remove the nojQuery class from the <body> element, thus
// making the CSS hover styles disappear.
$(function(){}
$('body').removeClass('nojQuery');
)
Kai*_*ack 14
只是一个较短的答案......
使用仅分配了悬停的第二个类:
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');
});
希望这个答案很有帮助.
Ste*_*n P 11
您可以使用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定义应覆盖任何先前的定义,除非更具体地定位.在这种情况下,您可能必须插入更多规则.
Jos*_*osh 11
这与aSeptik的答案类似,但这种方法呢？使用<noscript>标记中的JavaScript包装要禁用的CSS代码.这样,如果关闭javaScript,:hover将使用CSS ,否则将使用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>
我使用了not()CSS 运算符和 jQuery 的addClass()函数。这是一个示例，当您单击列表项时，它将不再悬停：
例如：
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');
});
| 归档时间： |
|
| 查看次数： |
125852 次 |
| 最近记录： |