web-dev-qa-db-fra.com

Comment utiliser 'hover' en CSS

J'ai utilisé le code ci-dessous afin d'atteindre cet objectif:

Lorsque la souris survole l’ancre, le soulignement ressort,

mais ça n'a pas fonctionné,

    <a class="hover">click</a>

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

Quelle est la bonne version pour faire cela?

csshoveranchor
29
omg

Si vous voulez que le soulignement soit présent pendant que la souris survole le lien, alors:

a:hover {text-decoration: underline; }

est suffisant, mais vous pouvez également utiliser un nom de classe "survol" si vous le souhaitez, les éléments suivants seraient également applicables:

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

Incidemment, il peut être intéressant de souligner que le nom de classe de 'hover' n'ajoute rien à l'élément, car l'élément psuedo de a:hover fait la même chose que celui de a.hover:hover. À moins qu'il ne s'agisse que d'une démonstration d'utilisation d'un nom de classe.

34
David Thomas

Il y a plusieurs façons de le faire ... Si vous voulez vraiment avoir une classe de "survol" dans votre élément A, alors vous devriez le faire:

a.hover:hover { code here }

Là encore, il est rare d’avoir un tel className, voici comment vous effectuez un survol régulier:

select:hover { code here }

Voici quelques exemples supplémentaires:

1

HTML:

<a class="button" href="#" title="">Click me</a>

CSS:

.button:hover { code here }

2

HTML:

<h1>Welcome</h1>

CSS:

h1:hover { code here }

: hover est l’une des nombreuses pseudo-classes.

Par exemple, vous pouvez changer, vous pouvez contrôler le style d'un élément lorsque la souris le survole, quand il est cliqué et quand il a déjà été cliqué.

HTML:

<a class="home" href="#" title="Go back">Go home!</a>

CSS:

.home { color: red; }
.home:hover { color: green; }
.home:active { color: blue; }
.home:visited { color: black; }

Mis à part les couleurs gênantes que j'ai données à titre d'exemple, le lien avec la classe 'home' sera rouge par défaut, vert lorsque la souris le survole, bleu lorsque vous cliquez dessus et noir après l'utilisateur.

J'espère que cela t'aides

7
SirCommy

Pas une réponse, mais une explication de la raison pour laquelle votre css ne correspond pas à HTML.

En css, l’espace sert de séparateur pour indiquer au navigateur de regarder dans les enfants, de sorte que votre css

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

signifie "recherchez un élément, puis recherchez tous les descendants de celui-ci qui ont une classe de survol et regardez tous les descendants de ces descendants qui ont l'état de survol" et correspondrait à ce balisage

<a>
   <span class="hover">
      <span>
         I will become underlined when you hover on me
      <span/>
   </span>
</a>

Si vous voulez faire correspondre <a class="hover">I will become underlined when you hover on me</a>, vous devez utiliser a.hover:hover, ce qui signifie "recherchez tout élément avec survol de classe et avec état de survol"

6
valentinas

survol: survol

4
Ballsacian1
a.hover:hover {
    text-decoration:underline;
}
4
chaos

Vous devez concaténer le sélecteur et le pseudo sélecteur. Vous aurez également besoin d'un élément de style pour contenir vos styles. La plupart des gens utilisent une feuille de style externe, pour de nombreux avantages (mise en cache pour un).

<a class="hover">click</a>

<style type="text/css">

    a.hover:hover {
        text-decoration: underline;

    }

</style>

Juste une remarque: la classe de survol n'est pas nécessaire, à moins que vous ne définissiez que certains liens pour avoir ce comportement (qui peut être le cas)

2
alex

Href est un attribut obligatoire d'un élément d'ancrage. Par conséquent, sans cet élément, vous ne pouvez pas vous attendre à ce que tous les navigateurs le traitent de manière égale. Quoi qu'il en soit, j'ai lu quelque part dans un commentaire que vous ne voulez que le lien soit souligné lors du survol, et pas autrement. Vous pouvez utiliser ce qui suit pour y parvenir, et cela ne s'appliquera qu'aux liens avec la classe hover -:

<a class="hover" href="">click</a>

a.hover {
    text-decoration: none;
}

a.hover:hover {
    text-decoration:underline;
}
1
PatrikAkerstrand

Vous devriez avoir utilisé:

a:hover {
    text-decoration: underline;
}

hover est une pseudo classe en CSS. Pas besoin d'attribuer une classe.

0
Alan Haggai Alavi

La dernière fois que je travaillais sur un défaut de Nice, je me demandais comment utiliser correctement la propriété de survol pour un lien de tag et pour le navigateur IE . Une chose étrange pour moi était que IE n’était pas capable de capturer un élément de lien de balise basé sur un simple sélecteur A . Alors, j'ai découvert comment forcer même la capture d'un élément de balise et j'ai remarqué que nous devions utiliser un sélecteur CSS plus spécifique. Voici un exemple ci-dessous - Cela fonctionne parfaitement:

li a[href]:hover {...}
0
JPawelHeaven