Geek Answers Handbook

Underline <a> when hovering over mouse

I want my <a> tag to get an underline on hover, and I use this code, but it doesn't have an underline on hover.

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

 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.

+7
source share
6 answers

The style attribute is larger than any selector, so it will always be applied last in the cascade (terrible rules !important does not hold). Move 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).

+20
source

The inline style overrides the style on the page.

Remove the inline style and use this:

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

We also advise you not to use <style> , it uses an external css file. Will greatly facilitate the service.

+3
source

I think 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>
+1
source

when you use hover you cannot use inline styles. you should 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>
0
source

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 the css specification.

-one
source

If the CSS code does not work, you can use the following HTML code that may help

 <html> <body> <a href="" style="text-decoration:underline-on-hover"> </a> </body> </html>
-2
source

More articles:


All Articles