Modification de CSS ( font-icônes )

Daelis
Javascript

Bonjour :)

Je travaille actuellement sur un lecteur vidéo, développé avec l'API video.js.
J'ai crée 4 templates différents du lecteur vidéo en CSS. Les composants (play, pause...) sont des font-icones.

Pour la petite histoire, je récupère 3 couleurs qui sont passées dans le HTML, via le js. Mon but est de modifier les templates du player (il en existe 4 actuellement) avec les couleurs choisies par l'utilisateur, pour que le player soit le plus personnalisable possible.
J'arrive à changer les couleurs des icones avec la propriété css de jQuery, dont voici un example :

$(".vjs-control-bar").css("color", color1);

Cependant, je voudrais faire la même chose pour le fond / la couleur de l'icône. J'aimerais qu'au survol, la couleur ou le background de l'icône change. Voici la fonction que j'utilise : 

$(".vjs-twitter-control").hover(function() {
 $(".vjs-twitter-control:before").css("color", color2);
 console.log('twitter');
});

Lorsque je survole l'icône, le "Twitter" apparaît bien dans la console, mais je n'ai aucun résultat visuel. La variable color2 fonctionne et est utilisée sur d'autres éléments du lecteur vidéo qui ne sont pas des font-icônes justement.

Voici la partie du CSS qui correspond à l'icône Twitter : 

/* TWITTER */
.vjs-test-skin .vjs-twitter-control {
  display: block;
  z-index: 2;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  right: 0;
  margin-right: 3.5em;
  top: 0;
  margin-top: 1em;
}
.vjs-test-skin .vjs-twitter-control-txt {
  display: block;
  opacity: 0;
}
.vjs-test-skin .vjs-twitter-control:before {
  font-family: 'icomoon';
  content: '\e601';
  font-size: 3em;
  line-height: 1.5em;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  position: absolute;
}
.vjs-test-skin .vjs-twitter-control.active:before {
}
.vjs-test-skin .vjs-twitter-control:hover:before {
}

Si j'ajoute la propriété background-color dans la dernière class ( vjs-twitter-control:hover:before ), le hover fonctionne parfaitement. Or, j'ai besoin de m'occuper de la gestion des couleurs de manière dynamique dans le JavaScript.

J'espère que l'un d'entre vous pourra m'éclaircir sur ce point. Ca fait un moment que je galère et j'aimerais bien sortir de cet enfer ^^'.

Merci à vous,
Lea.

6 réponses

Soundboy39

Bonjour,

Est ce que tu a essayé avec "mouseover" et/ou "mousenter" ??

$(".vjs-twitter-control").on('mouseover',function() {
 $(".vjs-twitter-control:before").css("color", color2);
 console.log('twitter');
});
Daelis
Auteur

Salut,
Oui et le résultat est le même. C'est-à-dire : aucun changement visuel...

Je déprime x').

Soundboy39

Tu est sur de ton sélecteur ?? Tu a testé avec un autre élément ??

Ouvre le volet HTML de ton inspecteur et regarde si l'attribut "style" apparait au niveau de l’élément ciblé lorsque tu survole.

Tu a regardé si tu n'avais pas une propriété en "!important" dans une règle en amont ??

Ayoub Ba

Le problème est claire, vous ne pouvez pas manipuler :before tout simplement parce qu'il n'est pas techniquement une partie de DOM, donc il est inaccessible par tout JavaScript.

Daelis
Auteur

Bonjour,
Merci pour vos réponses.

@Soundboy39: je suis sûre de mon sélecteur et la classe apparaît bien sur l'élément sélectionné dans mon navigateur.

@Ayoub Ba: je suis d'accord avec toi. Les pseudo-elements ne font pas partis du DOM. Cependant, j'arrive à définir leurs couleurs "de base". Cependant, les événements comme le survol ne sont pas gérés. C'est cette partie là que je ne comprends pas vraiment.
Pourquoi je peux faire ça :

$(".vjs-twitter-control").css("color", color3);

et pas ça : 

$(".vjs-twitter-control").hover(function() {
    $(".vjs-twitter-control:before").css("color", color2);
});

Du coup, je voudrais savoir si ce que je souhaite réaliser est possible. Si ce n'est pas le cas, avez vous une solution alternative à me proposer ?

Ayoub Ba

Quand vous écrivez $(".vjs-twitter-control:before") cela veut dire que vous essayez de sélectionner un pseudo-élément et comme on a dit précédemment les pseudo-éléments ne sont pas une partie de DOM donc on ne peut pas les manipuler avec JavaScript en général et alors jQuery, par contre je vous propose une simple solution je l'ai trouvé ICI , Bonne Chance.