underline <a> tag when hovering

Problem

I want my <a> tag gets underline when hovering,and I am used this code,but it doesn't have underline when hovering.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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.hover:hover {text-decoration: underline;}
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <a class="hover" style=" text-decoration:none; color:red" href="">Site Map</a>

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

this:

a:hover {text-decoration: underline;}
<a  style=" text-decoration:none; color:red" href="">Site Map</a>

doesn't work either.

what should I do?what is the problem?

Thanks in advance.

Problem courtesy of: jal nami

Solution

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

Solution courtesy of: Quentin

Discussion

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>
Discussion courtesy of: Nguyen Phung Hung

In case CSS code is not working you can use following HTML code that can help

<html>
<body>
<a href="" style="text-decoration:underline-on-hover"> </a>
</body>
</html>
Discussion courtesy of: Aniket Kariya

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.

Discussion courtesy of: Shankar Cabus

when you use hover you cannot use inline styles. you have to write it like this:

<!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.hover
{
    text-decoration: none;
    color:red
}

 a.hover:hover
 {
    text-decoration: underline;
    }
 </style>
</head>
<body>
<form id="form1" runat="server">
<div>
<a class="hover"  href="">Site Map</a>

</div>
</form>
</body>
</html>
Discussion courtesy of: MjeOsX

This will work for you.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <!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>ABC</title>
    <style type="text/css">
       a.hover {text-decoration: none; color: red;}
       a.hover:hover {text-decoration: underline;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
             <a class="hover" href="">Site Map</a>
        </div>
    </form>
</body>
</html>

Read more about css specification.

Discussion courtesy of: John Hack

This recipe can be found in it's original form on Stack Over Flow.