I can not get rid of a underline text

Question

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.

Answer 1

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)

Answer 2

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

Answer 3

div.class1 a { Properties:values} 

Would be a good practice.