underline un lien hypertexte sur Hover en utilisant jQuery

Question

J'ai utilisé la méthode

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

Y at-il une méthode plus élégante? (Une seule ligne)

Answer 1

Vous pourriez avoir des problèmes avec d'autres règles CSS prépondérants celui que vous voulez. Même si elle est déclarée en dernier dans le fichier, les autres déclarations peuvent avoir plus d'importance et donc votre nom sera ignoré. par exemple:

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

Parce que la première règle est plus spécifique il a la priorité. Voici une page expliquant CSS Spécificité: http://www.htmldog.com/guides/cssadvanced/specificity/

La raison pour laquelle votre solution jQuery fonctionne est parce que l'application d'un style via le paramètre style="" a une très grande spécificité.

La meilleure façon de trouver les règles appliquées et celles qui sont remplacées par d'autres consiste à utiliser l'extension Firebug pour Firefox. Inspectez l'élément dans celui-ci et cliquez sur l'onglet CSS: il vous montrera toutes les déclarations CSS qui sont appliquées, et mettra en évidence ceux qui sont en cours d'annulation.

Si vous voulez vraiment un moyen rapide et facile à résoudre votre problème si, essayez ceci:

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

---

si vous voulez vraiment coller à l'aide de jQuery, votre méthode est très bien et probablement le plus façon élégante de le faire (en utilisant jQuery).

Answer 2

Pourquoi ne pas simplement utiliser CSS?

#dvTheatres a { 
    text-decoration: none; 
} 

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

Answer 3

Pas de bonne réponse, mais peut-être que vous êtes à la recherche d'alternatives. L'une consiste à utiliser la fonction nommée (et CSS) à la place pour exprimer l'intention plutôt que d'ajouter des instructions brutes.

Script

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

CSS

.underline { text-decoration: underline; } 

Answer 4

pour cette solution

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