28172 sujets

CSS et mise en forme, CSS3

[Résolu] [resolu]Hover capricieux...

Salut à vous !
je ne sais pas si je suis fatigué par le boulot, mais un hover qui me semble simple ne veux pas fonctionner..

si vous avez une idée, merci ...car moi , j'ai à peu près tout essayé ^^
<a href="">
		<div class="bloc-bouton">Je m'inscris</div>
		</a>

.bloc-bouton{
height: auto;
width:400px;
padding:8px 15px;
margin: 0 auto;
color: white;
font-size: 16px;
background-color: #d18fe2;
font-family: 'Lato', sans-serif;
letter-spacing:1.5px;
text-align:center;
}
.bloc-bouton :hover a
{
background:yellow;
}
.bloc-bouton a
{
text-decoration:none;
}
.bloc-bouton [b]:hover[/b] a {.}
Erreur Smiley cligne .

--------
Après c'est le background du <a> ou du <div> qui doit passer en 'yellow' ?
Modifié par Cr2a (23 Mar 2015 - 20:42)
bon, apres moult essais, j'ai trouvé l'erreur : l'erreur est dans l'espace (Ô Grand Univers)

la classe hover doit respecter une sémantique et doit être écrite collée à son élément, soit 

.xxx:hover

et non 
.xxx :hover


Qu'il y ait un "a" pour un lien ou pas n'est pas important, puisque elle peut être utilisée seule.

Selon l'architecture de mon ecriture, seul le "je m'inscris" prenait la couleur jaune, dans son petit cadre, mais pas le DIV en entier. Donc , la bonne écriture CSS et HTML est :
.bloc-bouton{
height: auto;
width:400px;
padding:8px 15px;
margin: 0 auto;
color: white;
font-size: 20px;
background-color: #d18fe2;
font-family: 'Lato', sans-serif;
letter-spacing:1.5px;
text-align:center;
}
.bloc-bouton:hover{ background-color:yellow;}

<div class="bloc-bouton">
		<a href="xxx">
		Je m'inscris
		</a>
		</div>


..et là on a un DIV entier qui change de couleur ou de motif au survol souris; donc, attention à ne pas laisser d'espace dans l'ecriture de cette classe CSS

Je me disai qu'il n'y avait pas de raison, et j'avais beau lire et relire, je n'avais pas vu cet espace entre les deux points hover et ma classe

Merci à vous Smiley cligne
Modifié par chanteur006 (24 Mar 2015 - 11:50)
chanteur006 a écrit :
Salut à vous !

<a href="">
		<div class="bloc-bouton">Je m'inscrit</div>
		</a>

et
chanteur006 a écrit :

<div class="bloc-bouton">
		<a href="xxx">
		Je m'inscris
		</a>
		</div>


Merci à vous Smiley cligne

quand même Smiley cligne
Modifié par gc-nomade (24 Mar 2015 - 20:48)
Sujet clos
Aller à