Discussion :

[MisterHims]

Bonjour,

Débutant dans le domaine du Javascript, je m'y penche de plus en plus et notamment pour résoudre quelques manques liés au CSS, je m'explique :

Dans le cadre du développement d'un menu interactif (à base de CSS3 et de flex-boxs), je souhaitais appliquer un style à un élément quand un autre élément est survolé (autre que ses petits frères via le sélecteur sibling ~) et après avoir fait beaucoup de recherches, il s'avère qu'aucune solution viable n'existe actuellement. D'où ma roue de secours : le Javascript.

J'ai donc tenté quelques simples essais avec les quelques compétences dont je dispose mais je ne comprend vraiment pas la différence entre ses deux bouts de code, l'un avec la propriété color fonctionne, l'autre avec la propriété ffont-weight ne fonctionne pas :

Avec la propriété color (qui fonctionne) : https://codepen.io/misterhims/pen/KKXRzee

Avec la propriété font-weight (qui ne fonctionne pas) : https://codepen.io/misterhims/pen/yLaaMyW

Merci d'avance !

[Doksuri]

je souhaitais appliquer un style à un élément

ok ... lequel ?

quand un autre élément est survolé (autre que ses petits frères via le sélecteur sibling ~)

ok ... lequel ?
j'ai beau relire ton probleme... je ne comprends pas qui doit etre stylise, et qui doit etre survole

[MisterHims]

C'était à prendre au sens large du terme. Je voulais signifier par là que lorsque l'on essaye d'appliquer en CSS un style à un élément seulement quand un autre élément est survolé, alors on se retrouve un peu limité, d'où mon choix de me tourner vers le javascript.

Mais dans le cas présent pour l'exemple qui a été donné, c'est une liste de 3 éléments dont le premier se trouve déjà stylisé par une classe nommée "selected" qui applique une couleur bleue et une épaisseur.
L'objectif dans l'exemple du font-weight est d'annuler l'épaisseur de l'élément possédant la classe "selected"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

li.selected

lorsque la souris se retrouve sur un élément autre qu'un élément disposant de la classe "selected"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

li:not(.selected)

.

En fait, je ne comprend pas pourquoi mon JS fonctionne lorsque je cherche à modifier la propriété color et ne fonctionne pas avec font-weight.
Par la suite, je n'aurait qu'à utiliser le code fonctionnel pour appliquer le style de mon choix (sans devoir nécessairement jouer avec ajouter ou supprimer une classe déjà établie dans ma liste de styles).

Désolé si j'ai manqué de précisions et merci encore !

[NoSmoking]

Bonjour et bienvenue sur DVP.

Dans ton code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('li.selected label span').css('font-weight', 'none');

none n'est pas une valeur correct pour la propriété font-weight.

Fait un essai avec normal ou inherit.

PS :

• mouseover est à utiliser avec mouseout et inversement ;
• mouseenter est à utiliser avec mouseleave et inversement.

[MisterHims]

Oula, oui en effet grosse erreur de ma part ! Je vais dans ce cas me renseigner davantage sur les différences d'utilisation entre mouseover/mouseout et mouseenter/mouseleave.

Merci beaucoup !! :D