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

Question

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

Demandé el 2 de Mai, 2010: Quand la question a-t-elle été
44118 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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

J'ai réglé le a et a:hover dans mon CSS, car je veux un effet de survol, si JS n'est pas disponible. Mais si JS est disponible, je veux remplacer mon effet de survol CSS par un effet plus lisse (en utilisant le plugin de couleur jQuery par exemple).

J'ai essayé ça :

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

J'ai également essayé avec return false; mais cela ne fonctionne pas.

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

Comme mentionné par fudgey, une solution de contournement serait de réinitialiser les styles de survol en utilisant .css() mais je devrais écraser chaque propriété, spécifiée dans le CSS (voir ici : http://jsfiddle.net/raPeX/1/ ). Je suis à la recherche d'une solution générique.

Quelqu'un sait-il comment faire ?

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

Demandé el 2 de Mai, 2010 par meo

Answer 1

5 Réponses

Answer 2

140voto

Paul D. Waite Points 35456

Il n'existe pas de solution générique purement JavaScript, j'en ai peur. JavaScript n'est pas capable de désactiver les CSS :hover l'État lui-même.

Vous pouvez cependant essayer la solution de rechange suivante. Si cela ne vous dérange pas de vous mêler un peu de votre HTML et de votre CSS, cela vous évitera de devoir réinitialiser manuellement chaque propriété CSS 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');
)

Répondu el 4 de Mai, 2010 par Paul D. Waite (35456 Points )

5 votes

Je préfère cette solution aux solutions noscript car elle fonctionne lorsque le CSS est entièrement contenu dans des fichiers externes, et elle fonctionne également pendant le chargement de la page, si le CSS se charge en premier mais que le JS ne se charge que plus tard. L'utilisation de jQuery pour "améliorer progressivement" les choses aboutit souvent à des pages qui ne fonctionnent pas bien si vous cliquez sur des éléments avant qu'ils n'aient fini de se charger. Même avec un navigateur rapide sur un lien rapide, je vois cela souvent.

Commenté el 5 de Mai, 2010 par Mr. Shiny and New 安宇

0 votes

@Mr. Shiny and New : Je suis d'accord, je préfère cette solution à la mienne ! Je ne sais pas pourquoi je n'ai pas remarqué l'élégance de celle-ci avant...

Commenté el 5 de Mai, 2010 par Josh

3 votes

"Je préfère cette solution aux solutions noscript car elle fonctionne lorsque le CSS est entièrement contenu dans des fichiers externes. <noscript> solution. Vous mettez juste <link> à l'intérieur de votre <noscript> au lieu de <style> tags. Ma solution vous permet cependant de tout conserver dans un seul fichier de feuille de style plutôt que dans plusieurs.

Commenté el 6 de Mai, 2010 par Paul D. Waite

Afficher 5 autres commentaires

Answer 3

18voto

Echt Einfach TV Points 1091

Une réponse plus courte...

Utilisez une deuxième classe qui n'a que le survol assigné :

HTML

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

CSS

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

Vous pouvez maintenant 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 vous sera utile.

Répondu el 24 de Septembre, 2014 par Echt Einfach TV (1091 Points )

3 votes

Plus 1. Il n'est pas orthodoxe, mais il résout le problème d'une manière tout à fait sublime.

Commenté el 8 de Mai, 2015 par jim tollan

Answer 4

11voto

Stephen P Points 5521

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

Le fait de rendre les attributs !important et d'en faire la toute dernière définition CSS devrait remplacer toute définition précédente, à moins que l'une d'elles ne soit plus spécifiquement ciblée. Dans ce cas, vous devrez peut-être insérer davantage de règles.

Répondu el 4 de Mai, 2010 par Stephen P (5521 Points )

1 votes

Ou vous pourriez mettre toutes les règles noscript dans une feuille de style et ensuite désactiver la feuille de style de javascript.

Commenté el 5 de Mai, 2010 par Sean Hogan

2 votes

Ou mettez votre feuille de style Noscript <link> à l'intérieur d'une balise <noscript> élément ? Ça marcherait, non ?

Commenté el 5 de Mai, 2010 par Paul D. Waite

1 votes

Ou supprimer la règle "offensante" : developer.mozilla.org/fr/DOM/stylesheet.deleteRule

Commenté el 5 de Mai, 2010 par RoToRa

Afficher 2 autres commentaires

Answer 5

11voto

Josh Points 7132

Cette réponse est similaire à celle de aSeptik, mais qu'en est-il de cette approche ? Enveloppez le code CSS que vous souhaitez désactiver à l'aide de JavaScript dans le fichier <noscript> balises. De cette façon, si le 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>

Répondu el 5 de Mai, 2010 par Josh (7132 Points )

Answer 6

3voto

Christopher Altman Points 2371

J'utiliserais une feuille de style 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;
}

Cette simple CSS signifie que les liens seront toujours noirs et non soulignés. La question ne me permet pas de savoir si la modification de l'apparence est la seule chose que vous souhaitez contrôler.

Répondu el 2 de Mai, 2010 par Christopher Altman (2371 Points )

0 votes

C'est bien qu'il y ait un effet :hover si JS n'est pas disponible sur un client. Mais si c'est le cas, je dois l'écraser. J'ai défini une classe :hover dans mon css, je veux juste la désactiver.

Commenté el 2 de Mai, 2010 par meo

0 votes

@meo : Vous ne pouvez pas désactiver les psuedo classes CSS, mais vous pouvez passer outre en définissant tous les styles de liens pour qu'ils aient la même apparence/paramètres. Cette réponse et la mienne le font toutes deux, mais de manière différente.

Commenté el 3 de Mai, 2010 par Mottie

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

Réponses

HTML

CSS

JavaScript

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

HTML

CSS

JavaScript

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: