悬停时删除下划线链接

Question

I am trying to remove my underline on hover and everything, but it doesnt seem to be working.

<a href="agent_user_add.php"><font face="verdana" class="pluslink" style="font-size:26px;">+</font></a>

Below is my styling

.pluslink a:link {text-decoration:none;} .pluslink a:visited {text-decoration:none;} .pluslink a:hover {text-decoration:none;} .pluslink a:active {text-decoration:none;}

How come its not working? Am i putting the class in the wrong place?

Here is a jsfiddle below!

jSfiddle

Answer 1

.pluslink, .pluslink:visited,.pluslink:hover,.pluslink:active {
   text-decoration:none;
 }
<a href="agent_user_add.php" class="pluslink">+</a>

See http://jsfiddle.net/3pTTR/

fiddle updated

Answer 2

Your styles are missing their target, as there is no a inside an element called pluslink . If you want to target this a specifically, you'll have to give it a class or target it through its parent element(s).

As an aside, <font> is from the 1990s and way out of date. Instead, target the a and set the fonts via CSS.

Answer 3

Add:

a.pluslink {
    text-decoration:none;
}

Fiddle

Answer 4

Manish Jangir's answer will work, or if you prefer more specific styles, you can go with:

a .pluslink {text-decoration:none;}
a .pluslink:visited {text-decoration:none;}
a .pluslink:hover {text-decoration:none;}
a .pluslink:active {text-decoration:none;}

Answer 5

The font tag by default inherits it's text-decoration property from it's parent. In this case, you have the font tag wrapped in an a tag, which is defaults to text-decoration: underline .

The CSS that you have is applied to a tags that are decedents of elements with a class of pluslink . In your case, the pluslink class is applied to the font tag, which is the child of the a tag. The opposite of the CSS you're going for.

The easiest solution would be for you to move your font tag outside of your a tag:

jsFiddle

Alternatively, you could apply the pluslink class to your a tag, and edit your CSS code to include the font-size and font-family. The font tag has been deprecated for some time now. This also makes your code more manageable.

jsFiddle