Discussion :

[Latulipe2]

Bonjour à tous,

Je me casse la tête depuis quelques jours sur la création d'une fonction JS.
J'aimerais que lorsque la souris passe sur un élément (une image svg), celui-ci se mette en avant (comme entouré d'une ombre).

J'imagine que c'est assez simple mais je ne trouve pas les commandes pour le mette en place

Quelqu'un pourrait-il m'aider ?

Merci d'avance !

[mathieu]

avez vous déjà les 2 codes css, c'est à dire avec et sans l'ombre ?

[Latulipe2]

Voila ce que j'ai :

Code CSS :

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

1
2
3
4
5
6
7
.groupe{
cursor: pointer;
}
:hover.groupe {
    -webkit-filter: drop-shadow(0 0 5px rgba(0,0,0,0));      
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
}

Malheureusement l'ombre ne recouvre pas tous me contour de ma zone, mais seulement une partie, comme si il y avait une histoire de premier/second plan.
Et la fonction z-index n'y fait

[mathieu]

avant de faire le code javascript qui ajoute l'ombre, il faut déjà que vous ayez le résultat souhaité.
si vous avez besoin d'aide pour cette 1re étape, vous pouvez créer une nouvelle discussion dans le forum css :
https://www.developpez.net/forums/f4...mise-page-css/

et pour mettre en forme du code, vous pouvez utiliser le bouton "#" dans la barre d'outil de l'éditeur.

[NoSmoking]

Bonjour,

Et la fonction z-index n'y fait

L'attribut z-index n'est pas applicable aux éléments SVG. On peut toutefois le simuler, en modifiant l'empilement dans l'arborescence de rendu SVG, il suffit de déplacer l'élément dans celle-ci.

Voir un exemple fourni en début d'année : [Snap.svg] z-index sur éléments SVG