28172 sujets

CSS et mise en forme, CSS3

Rollover avec image CSS

Salut

J'ai vu des tutos sympas pour faire un rollover en CSS à partir d'une seule image dans laquelle les 2 états sont regroupés.
C'est chouette pour le site sur lequel je suis entrain de bosser... j'ai une centaines de petits carrés à remplir des images dont j'aimerai que les rollovers soit dans une seule image.

J'ai fait ce qu'il fallait... (enfin je crois)... et quelque chose cloche parceque ... bah ca marche pas.... voici le code :

Dans le HTML :
<div id="cadre01" class="thumb"><a href="www.lien.com"></a></div>


puis dans le CSS... je ne vous met le cas que pou un seul cadre.. sachant qu'ils sont nombreux donc j'ai voulu économiser les écritures en passant par des classes... ca donne ça:


#cadre01 {background-image:url(images/thumbs/image.png);}

.thumb{
	position:relative;
	display:block;
	float:left;
	margin:10px;
	width:80px;
	height:57px;
	-moz-box-shadow: 1px 1px 10px #555;
	-webkit-box-shadow: 1px 1px 10px #555;
}
.thumb a:hover{
	position:relative;
	display:block;
	float:left;
	width:80px;
	height:57px;
	background-position:-57px;
	-moz-box-shadow: 1px 1px 10px #000;
	-webkit-box-shadow: 1px 1px 10px #000;
}


Et donc quand je passe la souris dessus bah il se passe rien.
Ou est-ce que ca meurt svp ???

Merci
Modifié par milsou-III (28 Sep 2010 - 11:32)
Bonjour,

Tu as mis ton image de fond sur le cadre mais tu modifies la position de l'image en ciblant le lien au lieu de cibler le cadre... forcément ça coince.

.thumb {
	float:left;
	margin:10px;
	width:80px;
	height:57px;
	-moz-box-shadow: 1px 1px 10px #555;
	-webkit-box-shadow: 1px 1px 10px #555;
}

.thumb:hover {
	background-position:-57px;
	-moz-box-shadow: 1px 1px 10px #000;
	-webkit-box-shadow: 1px 1px 10px #000;
}

Pas la peine de répéter toutes les propriétés qui ne changent pas entre l'état "normal" et l'état "hover".
Par défaut un <div> a un rendu block, donc inutile de le préciser dans le CSS (sauf si as modifié le rendu précédemment).

Smiley cligne
Modifié par ellm (29 Sep 2010 - 13:56)
Salut,

ellm a écrit :
De même, un <div> est par défaut en position relative

Il est plutôt en position:static. Smiley lol
Enfin c'est quand même bizarre ce qui ce passe.

Le CSS indique bien une remonté de 57px en cas de survol... et il ne remonte que de 20.
J'ai testé plusieurs valeurs ... il ne remonte toujours que de 20. A 0px il remonte toujours à 20px.

Je deviens Smiley biggol
Sujet clos
Aller à