Anular a: hover con jQuery?

Question

He definido una etiqueta <a> con css. Estoy tratando de detener los cambios predeterminados de la hoja de estilo :hover en la etiqueta a. ¿Cómo desactivo los cambios de desplazamiento en la etiqueta a en Jquery?

Answer 1

en vivo de demostración de la siguiente solución: http://jsbin.com/umiru

-

La manera más fácil de lo que puedo pensar es cambiar:

a:hover { ... } 

en

a.someClass:hover { ... } 

Y luego agregar/eliminar .someClass a través de los métodos de jQuery:

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

Answer 2

La manera más fácil sería crear una nueva regla de CSS para la etiqueta a específica. Algo así como

a.linkclass:hover {color:samecolor} 

Si usted tiene que utilizar jQuery para anular los estilos por defecto, hay que añadir manualmente las reglas CSS en el estado estacionario, algo como esto:

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

esperanza esta ayuda

Answer 3

apenas define el CSS sin un "a: hover"

a { color: #fffff } 

Este CSS anular el a: enlace, a: hover, a: visitado y a: activo.

Answer 4

Aquí es una solución sin clases Hack:

CSS:

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

jQuery (utiliza jQueryUI para animar color):

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

demo