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)