11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Hover qui modifie background d'une div parent

Bonjour,

je code un wordpress en local pour un photographe. J'ai une page qui répertorie des galeries de photos sous forme d'une liste de titres dans un bloc au milieu de la page, et derrière une image plein écran en background image, comme ça :
upload/1586279909-78703-capturedaeacran2020-04-07aa19.png
Je voudrais qu'au survol des titres, l'image de background change, montrant une photo de la série en question.
Après avoir cherché, j'ai cru comprendre qu'un hover ne peut pas agir sur une div parente et que du coup il faut utiliser du javascript. Pourriez-vous m'indiquer comment je dois procéder sachant que je ne m'y connais qu'en CSS et HTML, donc bien expliquer et notamment me dire où je dois placer le code dans ma feuille php.
Merci d'avance Smiley smile
Modifié par Isaabelle (07 Apr 2020 - 19:23)
Hello,

Et un truc du style ?

#idparent! > #idenfant:hover { background-image: url('toto.png'); }
stryk a écrit :

Et un truc du style ?

#idparent! > #idenfant:hover { background-image: url('toto.png'); }

Merci, mais non ça ne marche pas... Smiley decu
En CSS, pour modifier un élément parent ? Non, du moins pas encore : on attend la promulgation d'un truc comme ':has()'.
Modifié par Olivier C (08 Apr 2020 - 06:58)
stryk a écrit :
Hello,

Bon je suis quasi certain que c'est faisable en CSS mais je ne retrouve plus comment ...
Voici un JS qui fonctionne en attendant Smiley ravi

https://codepen.io/exemple/pen/PoPYjjy


Merci Styrk ! Smiley smile
et du coup dans ma page php le js se place avant ou après l'ouverture de la balise php?
et avant ou après le html?
ah non ça ne se place pas dans le php ( enfin pas directement )
ça se met soit tel que dans le head ou en retirant la fonction DOMContentLoaded directement avant la fermeture du body.

Edit - Exemples:

<head>
   tes autres trucs du head
   <script>
      ici le code complet
   </script>
</head>




<body>
   le contenu du body
   <script>
      ici le code sans l'écouteur DOMContentLoaded 
   </script>
</body>

Modifié par stryk (08 Apr 2020 - 14:18)
Merci à vous deux !
Finalement j'en ai chié à tout adapter et à bien comprendre mais j'ai opté pour la 3e technique de aliasdmc parce que c'est 100% CSS Smiley biggrin
Mais j'ai modifié les balise <img> par des <div> avec les images en background vu que je voulais des images plein écran, en mode cover et centrées.
Alléluya j'ai cru que j'y arriverais pas Smiley ravi
Encore merci à vous deux pour votre aide !
Sujet clos
Aller à