Hover sur un groupe :before + txt

Bonjour,

Je suis entrain de réaliser des skins pour un lecteur vidéo (video.js). Les skins sont entièrement réalisés via .
J'ai créé un "social menu" qui regroupe Twitter, Facebook et Embed.

J'ai dans un premier temps une balise qui regroupe le tout (class = "vjs-social-menu") qui elle-même contient les différents éléments cités ci-dessus :

<div class="vjs-twitter-control"> ::before
    <div class="vjs-twitter-control-txt">Twitter</div>
</div>

J'aimerais qu'au survol d'un des deux éléments donc, :before OU text, ces deux derniers aient un certain comportement, qui aussi simple qu'il soit, sont sensés changer de couleur.
Voici la classe qui normalement devrait gérer ça :

.vjs-facebook-control-txt:hover,
.vjs-facebook-control:hover:before {
    color: #0099ff;
}

Donc, j'explique maintenant le résultat que j'obtiens :
- si je survol le text : hover sur tout le groupe;
- si je survol le :before : hover seulement sur le before.

J'espère que quelqu'un aurait une solution, peut-être me trompe-je dans le code ?

Merci d'avance pour votre aide .
Daelis.
Modifié par Daelis (18 Apr 2014 - 10:31)

salut,
ça dépendra de comment tu as appliqué la propriété "color".
Si la couleur est la même pour tout ce groupe d'éléments à l'état initial et à l'état survolé alors le plus logique serait de l'appliquer sur ".vjs-twitter-control". Comme cette propriété est héritée, tous ses descendants auront la même couleur (et c'est pareil pour le :hover).

.vjs-twitter-control:hover {color:#09f}

Si non en plus compliqué

.vjs-twitter-control:hover:before, .vjs-twitter-control:hover .vjs-twitter-control-txt {color:#09f}

Salut !

La première méthode (la plus compliquée, évidement!) fonctionne parfaitement avec l'ajout du :hover sur l'élément txt :

.vjs-twitter-control:hover:before, .vjs-twitter-control:hover .vjs-twitter-control-txt:hover {color:#09f}

Cependant, comme tu l'as dit, la couleur à l'état initial est bien similaire pour les deux éléments. Je ne comprends vraiment pourquoi la première méthode ne fonctionne donc pas...

Merci encore pour ton aide Zelalsan ! Et peut-être à bientôt sur le forum .
Modifié par Daelis (23 Apr 2014 - 09:37)

Ça doit être la façon avec laquelle tu as appliqué la couleur. Comme je l'ai dis, pour que la première méthode marche, il faut que la couleur soit appliqué de la même façon, à savoir

.vjs-twitter-control {color:#000}

où "#000" représente la couleur initiale.