Bizarrerie au niveau d'un hover

Bonjour, je vais tenter d'expliquer mon problème qui est aussi bizarre qu'intéressant, souhaitez moi bonne chance!

Je souhaite faire un système de "vote par étoiles" et pour cela je me suis inspirée de la logique présentée sur ce lien (en anglais):

http://www.komodomedia.com/blog/2006/01/css-star-rating-part-deux/

Pas grave si vous n'avez pas le courage de vous plongez dedans, voici ma question. Ci-après j'ai mis deux morceaux de CSS qui ne différent que par une seule ligne:

.star-rating div:hover {
background: url(star_rating2.gif) left center;
z-index: 2;
[b]left: 0px;[/b]
}

	
.star-rating div.one-star{
left: 0px;
}

.star-rating div.two-stars{
left: 30px;
}
	
.star-rating div.three-stars{
left: 60px;
}	

.star-rating div.four-stars{
left: 90px;
}	
	
.star-rating div.five-stars{
left: 120px;
}

	
.star-rating div.one-star:hover{
width:30px;
}
	
.star-rating div.two-stars:hover{
width: 60px;
}
	
.star-rating div.three-stars:hover{
width: 90px;
}
	
.star-rating div.four-stars:hover{
width: 120px;
}
	
.star-rating div.five-stars:hover{
width: 150px;
}

.star-rating div:hover {
background: url(star_rating2.gif) left center;
z-index: 2;
}

	
.star-rating div.one-star{
left: 0px;
}

.star-rating div.two-stars{
left: 30px;
}
	
.star-rating div.three-stars{
left: 60px;
}	

.star-rating div.four-stars{
left: 90px;
}	
	
.star-rating div.five-stars{
left: 120px;
}

	
.star-rating div.one-star:hover{
width:30px;
[b]left: 0px;[/b]
}
	
.star-rating div.two-stars:hover{
width: 60px;
[b]left: 0px;[/b]
}
	
.star-rating div.three-stars:hover{
width: 90px;
[b]left: 0px;[/b]
}
	
.star-rating div.four-stars:hover{
width: 120px;
[b]left: 0px;[/b]
}
	
.star-rating div.five-stars:hover{
width: 150px;
[b]left: 0px;[/b]
}

Il s'agit du "left:0px" qui est factorisé par le biais d'un div:hover dans le premier cas, et qui ne l'est pas dans le second où il apparait pour chacun des div.style1:hover, div.style2:hover, etc ...

Pour comprendre sachez que mon HTML se compose d'un div conteneur qui a le style .star-rating, et contenant plusieurs div (avec les styles one-star, two-star, etc ...). L'objectif est que, lorsque l'on passe la souris sur l'un des cinq div (les cinq étoiles), il soit ramené tout à gauche et s'élargisse (width qui grandit).

Ma question porte sur le fait que le dans le premier cas ça ne marche pas (le div n'est pas ramené à 0px, il reste collé à droite du div précédent, comme s'il venait se floater-left) et que dans le second cas ça marche! OR je ne vois aucune différence entre les deux codes, le premier ne faisant que "factoriser" le left:0px.

Suis-je assez claire?

Merci d'avance pour vos éclaircissements!
Cynth
Modifié par Cynthia (26 Oct 2010 - 19:08)

Bonjour,

Je ne pense pas que l'on puisse réellement parler de factoristion en CSS ; ce n'est pas tout à fait la même chose que l'héritage.

Le problème que je vois c'est que left ne sert strictement à rien sans positionnement relatif, absolu ou fixed. Donc sans voir plus de code, je dirais que le problème vient d'un manque de position:...

.star-rating div {
padding: 0px;
margin: 0px;
height: 30px;
width: 30px;
		
display: block;
z-index: 20;
position: absolute;
	}

Ci-dessus le code qui concerne les div, ils sont tous en absolute, le problème doit être ailleurs. Si je parle de "factorisation" (prudemment et donc avec guillemets!) c'est parce que dans le cas présent je ne vois pas la différence entre mettre un style à .star-rating div et mettre le même style à tous les div séparément .star-rating div.one-star, .star-rating div.two-stars, .star-rating div.three-stars, .star-rating div.four-stars, .star-rating div.five-stars (la class current-rating ci-après c'est autre chose: ne pas y prêter attention). Pareil pour les hover donc. Ci-après mon HTML:

<div id="votepomme" class="star-rating">
 <div class="current-rating" style="width:105px;"></div>
 <div class="one-star" onclick="vote('p1')"></div>
 <div class="two-stars" onclick="vote('p2')"></div>
 <div class="three-stars" onclick="vote('p3')"></div>
 <div class="four-stars" onclick="vote('p4')"></div>
 <div class="five-stars" onclick="vote('p5')"></div>
</div>

Il doit y avoir une petite subtilité que je ne saisis pas!
Modifié par Cynthia (27 Oct 2010 - 15:57)

Bonjour Cynthia (et Laurie-Anne, bien sûr !),

dans le premier cas, cela ne peut pas marcher, car dans les déclarations sans :hover qui suivent la première (celle où tu dis avoir "factorisé"), les sélecteurs ont plus de "poids" que celui du sien, et du coup ce sont eux qui l'emportent pour déterminer la propriété left de l'élément. Dans la mesure où ensuite, tu ne reprécises pas left pour le survol (et bien sûr, c'était le but du jeu), ta "factorisation" ne peut pas être prise en compte...

Essaye avec !important pour left dans la première déclaration, je pense que ça devrait apporter confirmation... (mais autant prendre la deuxième version, dans ce cas ! ).

Question de "poids" dans la "cascade"...
Modifié par Jerfa (28 Oct 2010 - 16:36)

Bonjour Jerfa, et bien vu! Tu dois avoir raison en effet, j'ai pas encore eu le temps de vérifier mais ça me parait pertinent.

Si je comprends bien, le style :hover attribué au parent n'a pas la priorité sur le style de ses héritiers sans :hover (désolé pour la formulation j'ai pas trouvé mieux!).

Intéressant, de même je ne connaissais pas !important, je vais aller creuser tout ça.


Merci pour vos réponses.
Modifié par Cynthia (28 Oct 2010 - 17:06)

Edit : ceci est le reste d'un doublon qui s'est produit en éditant le billet qui suit... Si un, une modératrice veut/peut le supprimer ?

Pas le billet qui suit, celui-ci, n'est-ce pas !
Modifié par Jerfa (29 Oct 2010 - 01:42)

De rien, Cynthia !

Non, non, pas tout-à-fait : il ne s'agit pas de conflits inter-générationnels ou de sombre histoire d'héritage car dans ton histoire, tout le monde est frères et sœurs et vit en harmonie...

Juste une histoire de priorité.

Ces choses sont très bien expliquées ici par exemple, vers la fin en particulier en ce qui nous concerne (paragraphe « Etape 3 : le tri par priorité calculée des sélecteurs »).

Pour reprendre ton premier morceau de CSS, si l'on considère ton premier sélecteur :

.star-rating div:hover 

En notant son « poids » sous la forme d'un nombre à 4 chiffres, on va dire qu'il « pèse » 0012 car :

• Il ne s'agit pas d'un attribut style de l'élément (la déclaration n'est pas « en-ligne », mais c'est un sélecteur de ta feuille). Donc 0 pour le premier chiffre.
• Le sélecteur ne comporte aucun id. Donc 0 pour le deuxième chiffre.
• Il comporte une classe (.star-rating). Donc 1 pour le troisième.
• Il comporte deux éléments (div et le pseudo-élément :hover). Donc 2 pour le quatrième.

Là, tu déclares left:0. Ok. Et ça vaut pour les étoiles en général. Plus loin, prenons par exemple les deux-étoiles :

.star-rating div.two-stars{ left: 30px; }

Le sélecteur « vaut » alors 0021 : feuille de style (0), pas d'id (0), deux classes (2), un élément (1). Tu déclares left:30px. Qui va avoir la priorité ? 0021, est supérieur à 0012, donc hop : victoire à 30px !

Mais mais mais... un peu plus loin... au survol, justement... Gardons nos deux-étoiles :

.star-rating div.two-stars:hover{ width: 60px; }

Là, rien n'est dit au sujet de la position left. Donc quelle règle va l'emporter, concernant la position, puisqu'il en reste deux en lice, à savoir nos deux précédentes ? La deuxième, bien sûr, puisqu'elle est plus « lourde ». Donc on reste sur left:30px et rien ne bouge au survol. C'est normal. En revanche, là, si tu avais déclaré left:0, cette déclaration l'aurait emporté car ce troisième sélecteur vaut 0022 (0, 0 id, 2 classes, 2 éléments), ce qui est supérieur aux valeurs des deux autres (0012 et 0021).

Enfin, si dans ces déclarations, deux ou plus se trouvaient avoir le même poids, ce serait la dernière qui aurait la priorité.
Sauf si !important suivait une déclaration, et alors là, cette déclaration l'emporterait sur toutes les autres dans ta ou tes feuilles de styles. C'est parfois utile pour tester quelque chose, mais c'est plutôt déconseillé, car outre que c'est un bon moyen de mettre un peu de pagaille en s'affranchissant du déroulement normal des choses, cela peut perturber l'utilisateur car ses feuilles de styles ont priorité sur les tiennes, sauf si tu as déclaré !important quelque part et pas lui. Son !important aura certes toujours plus d'importance que le tien, mais cela ne va pas dans le sens de privilégier les choix de l'utilisateur.

Voilà, c'était mon roman du jeudi soir !

Cordialement.
Modifié par Jerfa (29 Oct 2010 - 01:48)