Могу ли я отключить эффект 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 90
javascript css jquery

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');
)
129

просто короткий ответ...

используйте второй класс, который имеет только наведение назначено:

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');
 });

надеюсь, что этот ответ полезен.

12

вы можете управлять таблицами стилей и сами правила таблиц стилей с помощью 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 должно переопределить любое предыдущее определение, если оно не является более целенаправленным. Возможно, вам придется вставить больше правил в этом случае.

11

Это похоже на ответ асептика, но как насчет этого подхода? Оберните код 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>
11

Я бы использовал CSS, чтобы предотвратить: hover событие от изменения внешнего вида ссылки.

a{
  font:normal 12px/15px arial,verdana,sans-serif;
  color:#000;
  text-decoration:none;
}

этот простой CSS означает, что ссылки всегда будут черными и не подчеркнутыми. Я не могу сказать из вопроса, Является ли изменение внешнего вида единственным, что вы хотите контролировать.

3

я использовал not() оператор CSS и jQuery

2

попробуйте просто установить цвет ссылки:

$("ul#mainFilter a").css('color','#000');

Edit: или еще лучше, используйте CSS, как предложил Кристофер

1

На самом деле другой способ решить эту проблему может быть, перезапись 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/

1

Я бы рекомендовал заменить все :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');
          }
        }
      }
    }
  }
}
1