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

Hi Jeremy Reuten,

Can't use CSS. As the jQuery suggests, "a" is not the child of "dvTheatres"; its a descendant. I would like a jQuery solution

Answer 3

No good answer, but maybe you're just looking for alternatives. One is to use named function (and CSS) instead to express intent rather than in-lining raw instructions.

Script

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

CSS

.underline { text-decoration: underline; }

Answer 4

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).