2010-01-13 11 views
10

J'ai défini un tag <a> avec css. J'essaie d'arrêter les changements de feuille de style :hover par défaut sur la balise a. Comment désactiver les changements de survol sur la balise a dans Jquery?Remplacer a: hover avec jQuery?

Répondre

13

démonstration en direct de la solution suivante: http://jsbin.com/umiru

-

La meilleure façon que je peux penser est de changer:

a:hover { ... } 

dans

a.someClass:hover { ... } 

Et puis ajouter/supprimer .someClass via les méthodes de jQuery:

$(this).addClass("someClass"); // activates css rules for :hover 
$(this).removeClass("someClass"); // deactivates css rules for :hover 
+1

essayé fonctionne pas – zsharp

+0

Voulez-vous dire que votre feuille de style a 'a: hove r {color: red} 'ou quelque chose de similaire? – Sampson

+0

oui c'est ça hhh – zsharp

2

La méthode la plus simple serait de créer une nouvelle règle CSS pour l'étiquette spécifique. Quelque chose comme

a.linkclass:hover {color:samecolor} 

Si vous devez utiliser JQuery pour remplacer les styles par défaut, vous devez ajouter manuellement les règles CSS dans l'état de vol stationnaire, quelque chose comme ceci:

$('a.linkclass').hover(function(){ 
    $(this).css({'color':'samecolor'}); 
}); 

espoir cette aide

0

suffit de définir votre CSS sans "a: hover"

a { color: #fffff } 

Ce CSS Remplacer le lien a:, a: hover, a: visited et a: active.

6

Voici une solution sans classes de pirater:

CSS:

a {color: blue;} 
a:hover {color: red;} 

jQuery (utilise jQueryUI pour animer la couleur):

$('a').hover( 
    function() { 
    $(this) 
     .css('color','blue') 
     .animate({'color': 'red'}, 400); 
    }, 
    function() { 
    $(this) 
     .animate({'color': 'blue'}, 400); 
    } 
); 

demo