Puis-je désactiver un effet CSS:hover via JavaScript?

juste une réponse plus courte...

utiliser une deuxième classe qui a seulement le vol stationnaire assigné:

HTML

 <a class="myclass myclass_hover" href="#">My anchor</a>

CSS

 .myclass { 
   /* all anchor styles */
 }
 .myclass_hover:hover {
   /* example color */
   color:#00A;
 }

Maintenant, vous pouvez utiliser Jquery pour supprimer la classe, par exemple, si l'élément a été cliqué:

JQUERY

 $('.myclass').click( function(e) {
    e.preventDefault();
    $(this).removeClass('myclass_hover');
 });

J'espère que cette réponse est utile.

vous pouvez manipuler les feuilles de style et les règles de feuille de style eux-mêmes avec 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);

faire les attributs !important et en faisant de cette définition la toute dernière définition CSS devrait l'emporter sur toute autre définition antérieure, à moins qu'elle ne soit plus spécifiquement ciblée. Vous pourriez avoir à insérer plus de règles dans ce cas.

c'est similaire à la réponse d'aSeptik, mais qu'en est-il de cette approche? Envelopper le code CSS que vous voulez désactiver en utilisant JavaScript dans les étiquettes <noscript> . De cette façon, si javaScript est désactivé, le CSS :hover sera utilisé, sinon L'effet JavaScript sera utilisé.

exemple:

<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>

j'utiliserais CSS pour empêcher l'événement :hover de changer l'apparence du lien.

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

ce simple CSS signifie que les liens seront toujours noirs et non soulignés. Je ne peux pas dire à partir de la question si le changement dans l'apparence est la seule chose que vous voulez contrôler.

j'ai utilisé l'opérateur css not() et la fonction addClass() de jQuery. Voici un exemple, lorsque vous cliquez sur un élément de liste, il ne sera plus hover:

par exemple:

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

essayez juste de définir la couleur du lien:

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

Edit: ou mieux encore, utiliser le CSS, comme Christopher a suggéré de

en fait une autre façon de résoudre cela pourrait être, en écrasant la CSS avec insertRule .

il donne la possibilité d'injecter des règles CSS à une feuille de style existante/nouvelle. Dans mon exemple concret, il ressemblerait à ceci:

//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
);

démo avec mon exemple original de 4 ans: http://jsfiddle.net/raPeX/21 /

je recommande de remplacer toutes les propriétés :hover par :active quand vous détectez que l'appareil supporte le toucher. Suffit d'appeler cette fonction lorsque vous le faites que 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');
          }
        }
      }
    }
  }
}