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

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

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

Боюсь, не существует универсального решения на чистом JavaScript. JavaScript не может отключить само :hoverсостояние 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);

Сделав атрибуты! Important и сделав это самым последним определением CSS, следует переопределить любое предыдущее определение, если только одно не является более конкретным. В этом случае вам, возможно, придется вставить больше правил.

Это похоже на ответ aSeptik, но как насчет этого подхода? Оберните CSS-код, который вы хотите отключить с помощью JavaScript, в <noscript>тегах. Таким образом, если 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 и addClass()функцию jQuery . Вот пример, когда вы нажимаете на элемент списка, он больше не зависает:

Например:

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

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

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

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

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

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

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

Изменить: или еще лучше, используйте 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/