Überschreiben Sie a: Hover mit jQuery?

Question

Ich habe ein <a> Tag mit CSS definiert. Ich versuche, Standard-Stylesheet :hover Änderungen auf dem a Tag zu stoppen. Wie deaktiviere ich die Hover-Änderungen an dem a-Tag in Jquery?

Answer 1

Live-Demo der folgenden Lösung: http://jsbin.com/umiru

-

Der einfachste Weg, ich denken kann, ist zu ändern:

a:hover { ... } 

in

a.someClass:hover { ... } 

Und dann Hinzufügen/Entfernen .someClass über jQuery Methoden:

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

Answer 2

Der einfachste Weg wäre, eine neue CSS-Regel für das spezifische a-Tag zu erstellen. So etwas wie

a.linkclass:hover {color:samecolor} 

Wenn Sie JQuery zu verwenden, haben die Standardformate außer Kraft zu setzen, müssen Sie manuell die CSS-Regeln im Schwebezustand hinzufügen, etwa so:

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

Hoffnung diese Hilfe

Answer 3

definieren Sie Ihre CSS ohne "a: Hover"

a { color: #fffff } 

Diese CSS wird Überschreiben Sie den Link a:, a: hover, a: visited und a: active.

Answer 4

Hier ist eine Lösung ohne Hack Klassen:

CSS:

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

jQuery (verwendet jQueryUI Farbe zu animieren):

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

demo