Unterstrichen von <a> Link geht nicht einen Weg

Question

ich die Worte meines Link wollen nur zu zeigen, rot und unterstrichen sein, wenn es schwebte, und dies ist mein Code:

a:hover div { 
 
    text-decoration: underline; 
 
} 
 
a div{ 
 
    color: red; 
 
    text-decoration: none; 
 
}

<a href=""> 
 
    <div>next page</div> 
 
</a>

Jetzt ist die Farbe des Textes rot, aber die Unterstreichung verschwindet nicht. Warum?

Answer 1

Die unterstrichenen ist nicht in der Div auf einen Stil durch:

Aber für den Browser, die dieses Verhalten zu unterstützen, wird Ihre Lösung dieser unter Schnipsel sein. Dies ist der Standardstil für das a-Tag. Entfernen Sie die div Teil in Ihrem CSS-Selektor:

a:hover { 
 
    text-decoration: underline; 
 
} 
 
a { 
 
    color: red; 
 
    text-decoration: none; 
 
}

<a href=""> 
 
    <div>next page</div> 
 
</a>

Answer 2

Versuchen Sie dies, setzen Sie einfach text-decoration:none für a tag.

a{ 
    color: red; 
    text-decoration: none; 
} 

a:hover div { 
text-decoration: underline; 
} 

a:hover div { 
 
     text-decoration: underline; 
 
    } 
 
a{ 
 
     color: red; 
 
     text-decoration: none; 
 
    }

<a href=""> 
 
     <div>next page</div> 
 
</a>

Answer 3

Sie können keine Block-Level-Element (div) innerhalb eines Inline-Element (a) haben. Also der Browser, der es noch nicht unterstützt, könnte die div aus der a werfen. Verwenden Sie stattdessen eine span und geben Sie die display: block an, während a entweder in block oder inline-block.

a { 
 
    color: red; 
 
    text-decoration: none; 
 
} 
 
a:hover div { 
 
    text-decoration: underline; 
 
}

<a href=""> 
 
    <div>next page</div> 
 
</a>