Como remover sublinhado de um nome ao passar o mouse

123

Eu tenho esse html:

<legend class="green-color"><a name="section1">Section</a></legend>

legend.green-color{
    color:green;
}

No meu caso, Sectionparecendo verde, mas quando coloco o ponteiro do mouse sobre ele, ele se parece com um href, mas quero que ele permaneça igual, sem sublinhado e sem alteração de cor.

É possível conseguir sem alterar o css ou com o mínimo de alteração de css?

ou pode ser de alguma forma com jquery?

html css Joper
fonte

Respostas:

225

tente isto:

legend.green-color a:hover{
    text-decoration: none;
}
Harry Joy
fonte
20
Para sua informação, para as pessoas que usam o Bootstrap ... eu precisava usar "! Important" depois de "none" para que isso funcionasse. Exemplo: a: hover {text-decoration: none! Important; }
JustBlossom
19

Remova a decoração do texto da marca âncora

<a name="Section 1" style="text-decoration : none">Section</a>
Adithya Surampudi
fonte
4
É uma prática ruim usar estilos em linha. É melhor separar html de estilos para reduzir o trabalho de manutenção mais tarde.
7
Não pretendo trazer uma guerra de chamas aqui, mas gosto desse estilo em linha. Quero dizer, meu arquivo HTML só precisa desse tipo de estilo uma ou duas vezes. Não vejo o tempo justificado criando uma folha de estilos separada, mesmo que a separação seja uma boa prática.
user3454439
6

Você pode usar o CSS abaixo legend.green-color a:hoverpara fazer isso.

legend.green-color a:hover {
    color:green;
    text-decoration:none;
}
Colisor pequeno de Hadron
fonte
5

Para manter a cor e impedir um sublinhado no link:

legend.green-color a{
    color:green;
    text-decoration: none;
}
Chris
fonte
3

Você pode atribuir um ID ao link específico e adicionar CSS. Veja os passos abaixo:

1.Adicione um ID de sua escolha (deve ser um nome exclusivo; só pode começar com texto, não um número):

<a href="/abc/xyz" id="smallLinkButton">def</a>

  1. Em seguida, adicione o CSS necessário da seguinte maneira:

    #smallLinkButton:hover,active,visited{

      text-decoration: none;
      }
Raymond Wachaga
fonte
2 

legend.green-color{
    color:green !important;
}
Expandir snippet

BaiJiFeiLong
fonte