underline <a> tag when hovering

I think that you should write code like: (Demo here: http://jsfiddle.net/BH7YH/)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
           a {text-decoration: none; color:red}
           a:hover {text-decoration: underline;}
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="hover" href="">Site Map</a>

    </div>
    </form>
</body>
</html>

The inline style overrides the style on the page.

Remove the inline style and uses this:

<style type="text/css">
    a {text-decoration: none;}
    a:hover {text-decoration: underline;}
</style>

Also advise you not to use <style>, uses an external css file. Will greatly facilitate maintenance.


The style attribute is more specific than any selector, so it will always be applied last in the cascade (horrible !important rules not withstanding). Move the CSS to the stylesheet.

a.hover {
    color: red;
    text-decoration: none;
}

a.hover:hover {
    text-decoration: underline;
}

(I also suggest a more semantic name for the class).

Tags:

Html

Css

Tags

Recent Posts