Subrayar en un hipervínculo de la libración usando jQuery

Question

utilicé el método

$("#dvTheatres a").hover(function(){ 
     $(this).css("text-decoration", "underline"); 
    },function(){ 
     $(this).css("text-decoration", "none"); 
    } 
); 

¿Hay un método más elegante? (Línea única)

Answer 1

Puede que tenga problemas con otras reglas CSS primordiales el que usted desea. Incluso si se declara último en el archivo, otras declaraciones pueden tener más importancia y, por lo tanto, se ignorará. por ejemplo:

#myDiv .myClass a { 
    color: red; 
} 
#myDiv a { 
    color: blue; 
} 

Debido a que la primera regla es más específica éste tendrá prioridad. Aquí hay una página que explica la especificidad de CSS: http://www.htmldog.com/guides/cssadvanced/specificity/

El motivo por el que su solución jQuery funciona es porque la aplicación de un estilo a través del parámetro style="" tiene una especificidad muy alta.

La mejor manera de encontrar qué reglas se están aplicando y cuáles están siendo rechazadas por otros es usar la extensión Firebug para Firefox. Inspeccione el elemento y haga clic en la pestaña CSS: le mostrará cada declaración de CSS que se está aplicando, y pondrá en marcha las que están siendo anuladas.

Si desea una forma muy rápida y fácil de resolver su problema, sin embargo, intenta esto:

#dvTheatres a:hover { 
    text-decoration: underline !important; 
} 

---

si realmente quiere meter a usar jQuery, el método está muy bien y probablemente el más manera elegante de hacerlo (usando jQuery).

Answer 2

Por qué no utilizar CSS?

#dvTheatres a { 
    text-decoration: none; 
} 

#dvTheatres a:hover { 
    text-decoration: underline; 
} 

Answer 3

No hay una buena respuesta, pero tal vez solo estás buscando alternativas. Una es usar la función nombrada (y CSS) para expresar el intento en lugar de alinear las instrucciones en bruto.

Guión

function toggleUnderline() { $(this).toggleClass('underline') }; 
$("#dvTheatres a").hover(toggleUnderline, toggleUnderline); 

CSS

.underline { text-decoration: underline; } 

Answer 4

seguirlo

$('.my-awesome div a').hover().css('text-decoration', 'none');