2

I got this code:

<div class="class1"><a href="http://nvm/">text</a></div>

CSS code of class1 is following:

.class1 {
       text-decoration: none;
}

The output looks on, until I move the mouse over the div. The text is underlined then.

Sure, I've tried a lot of methods like:

.class1:hover {
      text-decoration: none;
}

I've also tried to add a !important attribute, but still without expected results. :/

I've also used firebug to debug the HTML & CSS code, and I can't find any class with attribute text-decoration: underline;.

I know this is such a silly question, but I'm out of ideas.

Lucas
  • 3,517
  • 13
  • 46
  • 75
  • possible duplicate of [Remove stubborn underline from link](http://stackoverflow.com/questions/2789703/remove-stubborn-underline-from-link) – Chris Marie Jan 24 '15 at 21:31

3 Answers3

4

You should set the text-decoration property to none for the a element inside of .class1, since that is the element that contains the text (and likely the element that you are hovering on).

For example:

.class1 a (all a tags whose ancestor is .class1)

OR

.class1 > a (all a tags whose parent is .class1)

Jon Newmuis
  • 25,722
  • 2
  • 45
  • 57
  • Thanks you. `.pagination > a { text-decoration: none !important; }` worked... finally :) – Lucas Oct 03 '11 at 02:19
1

If you're setting a global <a> property elsewhere, you'll need to specifically override the <a> tags for that class.

.class1 a { text-decoration: none; }

and

.class1 a:hover {text-decoration: none; }

depending on if you have a global hover defined too

lewiguez
  • 3,813
  • 1
  • 25
  • 40
0
div.class1 a { Properties:values}

Would be a good practice.