2010-01-13 14 views
10

Ho definito un tag <a> con css. Sto cercando di fermare il foglio di stile predefinito :hover modifiche sul tag a. Come disabilitare le modifiche al passaggio del mouse sul tag in Jquery?Ignora a: passa il mouse con jQuery?

risposta

13

live demo del seguente soluzione: http://jsbin.com/umiru

-

Il modo più semplice che posso pensare è quello di cambiare:

a:hover { ... } 

in

a.someClass:hover { ... } 

E poi aggiungi/rimuovi .someClass tramite i metodi di jQuery:

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

provato che non funziona – zsharp

+0

Intendi dire che il tuo foglio di stile ha 'a: hove r {color: red} 'o qualcosa di simile? – Sampson

+0

sì questo è hhh – zsharp

2

Il modo più semplice sarebbe quello di creare una nuova regola CSS per lo specifico tag. Qualcosa di simile

a.linkclass:hover {color:samecolor} 

Se è necessario utilizzare JQuery per sovrascrivere gli stili di default, è necessario aggiungere manualmente le regole CSS nello stato hover, qualcosa di simile:

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

speranza questo aiuto

0

Basta definire il CSS senza un "a: hover"

a { color: #fffff } 

Questa CSS sovrascrivere il collegamento a: a: hover, a: visited e a: active.

6

Ecco una soluzione senza classi Hack:

CSS:

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

jQuery (usa jQueryUI per animare colore):

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

demo

Problemi correlati