web-dev-qa-db-fra.com

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

J'essaie d'empêcher le navigateur d'utiliser l'effet :hover Du CSS, via JavaScript.

J'ai défini les styles a et a:hover Dans mon code CSS, car je souhaite un effet de survol si JS n'est pas disponible. Mais si JS est disponible, je souhaite remplacer mon effet de survol CSS par un effet plus fluide (à l'aide du plugin de couleur jQuery, par exemple).

J'ai essayé ceci:

$("ul#mainFilter a").hover(
     function(e){ e.preventDefault(); ...do my stuff... }, 
     function(e){ e.preventDefault(); ...do my stuff... });

J'ai aussi essayé avec return false;, Mais ça ne marche pas.

Voici un exemple de mon problème: http://jsfiddle.net/4rEzz/ . Le lien devrait s'effacer sans devenir gris.

Comme mentionné par fudgey, une solution de contournement consisterait à réinitialiser les styles de survol à l'aide de .css(), mais il me faudrait écraser toutes les propriétés spécifiées dans le CSS (voir ici: http: // jsfiddle. net/raPeX/1 / ). Je cherche une solution générique.

Est-ce que quelqu'un sait comment faire ça?

PS: Je ne veux pas écraser tous les styles que j'ai définis pour le survol.

javascriptjquerycss
94
meo

Il n’existe pas de solution générique JavaScript pure. JavaScript ne parvient pas à désactiver le CSS :hover l'état lui-même.

Vous pouvez cependant essayer la solution de rechange suivante. Si cela ne vous dérange pas de manipuler votre code HTML et CSS, cela vous évite de devoir réinitialiser chaque propriété CSS manuellement via 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');
)
131
Paul D. Waite

Utilisez une deuxième classe à laquelle seul le survol est affecté:

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.

14
Kai Noack

Ceci est similaire à la réponse de aSeptik, mais qu'en est-il de cette approche? Encapsulez le code CSS que vous souhaitez désactiver à l'aide de JavaScript dans <noscript> Mots clés. Ainsi, 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>
11
Josh

Vous pouvez manipuler les feuilles de style et les règles de feuille de style elles-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);

Rendre les attributs! Importants et en faire la toute dernière définition CSS devrait remplacer toute définition précédente, à moins que celle-ci ne soit plus spécifiquement ciblée. Vous devrez peut-être insérer plus de règles dans ce cas.

11
Stephen P

J'utiliserais CSS pour empêcher l'événement: hover de modifier 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 de la question si le changement d’aspect est la seule chose que vous souhaitez contrôler.

3
Christopher Altman

Je recommanderais de remplacer toutes les propriétés :hover Par :active Lorsque vous détectez que l'appareil prend en charge le toucher. Appelez simplement cette fonction lorsque vous le faites en tant 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');
          }
        }
      }
    }
  }
}
3
Shobhit Sharma

J'ai utilisé l'opérateur not() CSS et la fonction addClass() de jQuery. Voici un exemple, lorsque vous cliquez sur un élément de la liste, celui-ci ne survole plus:

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

Essayez simplement de définir la couleur du lien:

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

Edit: ou mieux encore, utilisez le CSS, comme l'a suggéré Christopher

1
Mottie

En réalité, un autre moyen de résoudre ce problème pourrait être de remplacer le CSS par insertRule .

Il donne la possibilité d'injecter des règles CSS dans une feuille de style existante/nouvelle. Dans mon exemple concret, cela 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/

1
meo