Comment utiliser "hover" dans CSS

j'ai utilisé le code ci-dessous pour atteindre cet objectif:

quand la souris plane sur l'ancre, le soulignement sort,

mais il n'a pas de travail,

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

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

Quelle est la bonne version pour faire ça?

29
demandé sur ChrisW 2009-05-25 05:25:03

9 réponses

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

a:hover {text-decoration: underline; }

est suffisante, cependant, vous pouvez également utiliser un nom de classe de 'hover' si vous le souhaitez, et les suivantes sont également applicables:

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

D'ailleurs, il peut être utile de souligner que le nom de classe de 'hover' n'ajoute rien à l'élément, comme l'élément psuedo de a:hover fait la même chose que celui de a.hover:hover. Sauf si c'est juste une démonstration de à l'aide d'un nom de classe.

34
répondu David Thomas 2013-01-28 03:29:27

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

a.hover:hover { code here }

encore une fois, il est rare d'avoir un tel nom de classe là, c'est comme ça qu'on fait un vol stationnaire régulier:

select:hover { code here }

En voici quelques autres exemples:

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 passe sur elle, lorsqu'il est cliqué et quand il ne l'était auparavant cliquer.

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 maladroites que j'ai données comme exemples, le lien avec la classe 'home' sera rouge par défaut, vert quand la souris les survole, bleu quand ils sont cliqués et noir après qu'ils ont été cliqués.

Espérons que cette aide

7
répondu SirCommy 2012-09-29 17:58:37

pas de réponse, mais une explication des raisons pour lesquelles votre css ne correspond pas au HTML.

dans l'espace css est utilisé comme un séparateur pour dire au navigateur de regarder dans les enfants, donc votre css

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

signifie "rechercher un élément, puis rechercher tous ses descendants qui ont la classe hover et regarder tous les descendants de ces descendants qui ont l'état hover" et correspondrait à ce markup

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

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

6
répondu valentinas 2013-01-28 03:39:49

A. hover: hover

4
répondu Ballsacian1 2009-05-25 01:27:40
a.hover:hover {
    text-decoration:underline;
}
4
répondu chaos 2009-05-25 01:28:11

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

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

<style type="text/css">

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

    }

</style>

Juste une remarque: hover classe n'est pas nécessaire, sauf si vous définissez seulement certains liens de ce comportement (qui peut être le cas)

2
répondu alex 2009-05-25 01:28:18

Le href est un attribut requis d'un élément d'ancrage, donc sans lui, vous ne pouvez pas vous attendre à ce que tous les navigateurs le gèrent de la même manière. Quoi qu'il en soit, j'ai lu quelque part dans un commentaire que vous voulez seulement que le lien soit souligné en vol stationnaire, et pas autrement. Vous pouvez utiliser ce qui suit pour y parvenir, et cela ne s'appliquera qu'aux liens avec le passez la sourisclasse:

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

a.hover {
    text-decoration: none;
}

a.hover:hover {
    text-decoration:underline;
}
1
répondu PatrikAkerstrand 2009-07-03 14:06:34

Vous devriez avoir utilisé:

a:hover {
    text-decoration: underline;
}

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

0
répondu Alan Haggai Alavi 2009-05-25 01:28:33

je travaillais sur un défaut sympa la dernière fois et je me demandais comment utiliser correctement la propriété hover pour un lien de balise et pour IE browser. Une chose étrange pour moi était QU'IE n'était pas capable de capturer un élément de lien de balise basé sur un simple sélecteur de A. Donc, j'ai trouvé comment même forcer la capture d'un élément d'étiquette 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
répondu JPawelHeaven 2013-12-02 11:09:24