looking for a better solution to modify background parent when child div is hovered with css or javascript

Question

i try to modify a background div when i hover a child div. Please notice that i have more than one child and here is my solution.

But i'm pretty sure that there is a better way to achieve that who will of course be visible by all navigators (I.E, Firefox, Safari, Opera, Chrome...) That's why i didn't use the has() option !!

here is my jsfiddle

<h2 class="wl-bg-collectif">
<span class="w-text-block" style="display: block;">
<span class="w-text-content">ONE</span>
</span>
</h2>

<h2 class="wl-bg-prive">
<span class="w-text-block" style="display: block;">
<span class="w-text-content">TWO</span>
</span>
</h2>

<h2 class="wl-bg-live">
<span class="w-text-block" style="display: block;">
<span class="w-text-content">THREE</span>
</span>
</h2>

.w-text-content {
padding-bottom: 600px!important;
margin-bottom: -600px!important;
display: block;
text-align: left;
}

.wl-bg-collectif .w-text-content:hover {
background: transparent url(https://res2.yourwebsite.life/res/5ef668f5db29eb0022cd0cd6/636f04c51f4f1b000d196c8c) no-repeat right top!important;
background-size: 50%!important;
z-index: -1;
color: #F24908!important;
}

.wl-bg-prive .w-text-content:hover {
background: transparent url(https://res2.yourwebsite.life/res/5ef668f5db29eb0022cd0cd6/636f04c51f4f1b000d196c8c) no-repeat right top!important;
background-size: 50%!important;
z-index: -1;
color: #F24908!important;
}

.wl-bg-live .w-text-content:hover {
background: transparent url(https://res2.yourwebsite.life/res/5ef668f5db29eb0022cd0cd6/636f04c51f4f1b000d196c8c) no-repeat right top!important;
background-size: 50%!important;
z-index: -1;
color: #F24908!important;
}

Answer 1

Here is what I tried to explain to you in my comments:

window.onload = () => {
  const wl_img = document.getElementById('wl-img');

  [
    ['collectif', 'https://res2.yourwebsite.life/res/5ef668f5db29eb0022cd0cd6/636e7ce48b2d53000d9af524'],
    ['prive', 'https://res2.yourwebsite.life/res/5ef668f5db29eb0022cd0cd6/636e7ce26da50f000c512a26'],
    ['live', 'https://res2.yourwebsite.life/res/5ef668f5db29eb0022cd0cd6/636f04c51f4f1b000d196c8c']
  ].forEach(([className, url]) => {
    const el = document.querySelector(`.wl-bg-${ className }`)

    el.onmouseover = () => {
      wl_img.style.display = '';
      wl_img.src = url
    }
    el.onmouseleave = () => {
      wl_img.style.display = 'none';
      wl_img.src = ''
    }
  })
}

h2:hover,
h2:focus,
h2:active {
  color: #F24908 !important;
}

footer {
  display: flex;
  justify-content: space-between;
}

#wl-img {
  height: 20%;
  max-height: 50em;
  max-width: 50%;
}

<footer class="w-section__footer">

  <div>
    <h2 class="wl-bg-collectif">COLLECTIF</h2>
    <h2 class="wl-bg-prive text_1k0">PRIVÉ</h2>
    <h2 class="wl-bg-live text_1k0">LIVE ONLINE</h2>
  </div>

  <img id="wl-img" style="display: none">

</footer>