Могу ли я отключить эффект CSS: hover с помощью JavaScript?
Я пытаюсь запретить браузеру использовать :hover
эффект CSS, через JavaScript.
Я поставил a
и a:hover
стили в моем CSS, потому что я хочу эффект наведения, если JS не доступен. Но если JS и доступно, я хочу перезаписать свой эффект наведения CSS более плавным (например,используя плагин jQuery color.)
Я попытался это:
$("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 ответов:
боюсь, что нет чистого общего решения JavaScript. JavaScript не может отключить CSS государство.
вы можете попробовать следующий альтернативный обходной путь, хотя. Если вы не против немного поработать в своем HTML и CSS, это избавит вас от необходимости сбрасывать каждое свойство CSS вручную с помощью JavaScript.
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'); )
просто короткий ответ...
используйте второй класс, который имеет только наведение назначено:
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'); });
надеюсь, что этот ответ полезен.
вы можете управлять таблицами стилей и сами правила таблиц стилей с помощью 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 должно переопределить любое предыдущее определение, если оно не является более целенаправленным. Возможно, вам придется вставить больше правил в этом случае.
Это похоже на ответ асептика, но как насчет этого подхода? Оберните код CSS, который вы хотите отключить с помощью JavaScript в
<noscript>
теги. Таким образом, если javaScript выключен, CSS:hover
будет использоваться, в противном случае будет использоваться эффект 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>
Я бы использовал CSS, чтобы предотвратить: hover событие от изменения внешнего вида ссылки.
a{ font:normal 12px/15px arial,verdana,sans-serif; color:#000; text-decoration:none; }
этот простой CSS означает, что ссылки всегда будут черными и не подчеркнутыми. Я не могу сказать из вопроса, Является ли изменение внешнего вида единственным, что вы хотите контролировать.
попробуйте просто установить цвет ссылки:
$("ul#mainFilter a").css('color','#000');
Edit: или еще лучше, используйте CSS, как предложил Кристофер
На самом деле другой способ решить эту проблему может быть, перезапись CSS с
insertRule
.это дает возможность вводить правила 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 );
демо с моим 4-летним оригинальным примером: http://jsfiddle.net/raPeX/21/
Я бы рекомендовал заменить все
: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'); } } } } } }