Могу ли я отключить эффект CSS: hover с помощью JavaScript?

Я пытаюсь запретить браузеру использовать эффект :hover CSS, используя JavaScript.

Я установил стили a и a:hover в моем CSS, потому что мне нужен эффект наведения, если 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, обходным решением было бы reset стили наведения с использованием .css(), но мне пришлось бы перезаписать каждое отдельное свойство, указанное в CSS (см. здесь: http://jsfiddle.net/raPeX/1/). Я ищу универсальное решение.

Кто-нибудь знает, как это сделать?

PS: Я не хочу переписывать каждый стиль, который я установил для зависания.

Ответы

Ответ 1

Не существует чистого общего решения JavaScript, я боюсь. JavaScript не может отключить само правило CSS :hover.

Однако вы можете попробовать следующее альтернативное обходное решение. Если вы не возражаете ошибочно обманывать свой HTML и CSS, это избавит вас от необходимости использовать reset каждое свойство 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');
)

Ответ 2

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

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

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

Ответ 3

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

Ответ 4

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

Ответ 5

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

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

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

Ответ 6

Я использовал оператор CSS not() и функцию 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');
});

Ответ 7

Я бы рекомендовал заменить все свойства :hover на :active, когда вы обнаружите, что устройство поддерживает touch. Просто вызовите эту функцию, когда вы сделаете это как 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');
          }
        }
      }
    }
  }
}

Ответ 8

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

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

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

Ответ 9

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