underline tag when hovering

问题

I want my <a> tag gets underlined when hovered. I have the following code, but it doesn't work.

<%@ 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?

回答1:

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

回答2:

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.

回答3:

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>

回答4:

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>

回答5:

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>

回答6:

This might help!

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

来源：https://stackoverflow.com/questions/16839284/underline-a-tag-when-hovering

标签

html

css

html5

css3

underline <a> tag when hovering