html中hover有静⽌的命令,我可以通过JavaScript禁⽤CSS:cssclass属性
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 */ jQuery
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
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 = ateElement("style"); // WebKit hack :( style.ateTextNode("")); // Add the
⽤我4岁的原始⽰例演⽰: http : //jsfiddle/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 =
place(':hover', ':active'); } } } } } }

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。