Não é possível desfazer a decoração de texto para elementos filho
Diga que você tem este html:
<a href="#">
This is underlined
<span>
This isn't.
</span>
</a>
E este css:
a:hover {
text-decoration: underline; /* I know, this is enabled by default. */
}
a:hover span {
text-decoration: none !important;
}
Por que o elemento a> span ainda tem um sublinhado. Tenho certeza que você realmente deve ter desfeito a decoração usando 'none'. Eu sei que você pode alcançar o resultado desejado usando este:
<a href="#">
<span class="underlined">
This is underlined
</span>
<span>
This isn't.
</span>
</a>
plus este css:
a:hover {
text-decoration: none;
}
a:hover span.underlined {
text-decoration: underline;
}
Mas ... simplesmente não faz sentido para mim por que você não pode desabilitar a decoração de texto de um elemento filho. Então por que...
Edit: Blocos em linha
De acordo com @amosrivera, ele funciona quando você usa o bloco embutido. Posso confirmar que isso funciona no Safari e no Chrome!
a:hover span{
text-decoration:none;
display:inline-block;
}
Como mencionado, isso funciona para o Safari e Chrome, mas não para o Firefox. A solução a seguir funciona no Firefox, mas não no Safari e Chrome ...
a:hover span{
text-decoration:none;
display:block;
}
Mesinha
CSS-Rule | Webkit | Firefox | Opera | IE
--------------------------------------------------------------------------------
display: block; | x | | ? | ?
display: inline-block; | | x | ? | ?