Underline a Hyperlink On Hover using jQuery

Question

I used the method

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

Is there a more elegant method?(single line)

Answer 1

Why not just use CSS?

#dvTheatres a {
    text-decoration: none;
}

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

Answer 2

You might be having issues with other CSS rules overriding the one you want. Even if it is declared last in the file, other declarations might have more importance and hence your will be ignored. eg:

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

Because the first rule is more specific it takes precedence. Here's a page explaining CSS Specificity: http://www.htmldog.com/guides/cssadvanced/specificity/

The reason your jQuery solution works is because applying a style via the style="" parameter has very high specificity.

The best way to find which rules are being applied and which are being overruled by others is to use the Firebug extension for Firefox. Inspect the element in that and click on the CSS tab: it will show you every single CSS declaration which is being applied, and put a strike-through on ones which are being overruled.

If you want a really quick and easy way to solve your problem though, try this:

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

---

if you really want to stick to using jQuery, your method is fine and probably the most elegant way to do it (using jQuery).