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

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 >
<span  style="display: block;">
<span >ONE</span>
</span>
</h2>

<h2 >
<span  style="display: block;">
<span >TWO</span>
</span>
</h2>

<h2 >
<span  style="display: block;">
<span >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;
}

CodePudding user response：

You can use the built-in css :has pseudo element like this :

.wl-bg * {
  padding-bottom: 600px !important;
  margin-bottom: -600px !important;
  display: block;
  text-align: left;
  width: fit-content;
}

.wl-bg:has(: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;
}

<h2 >
  <span>ONE</span>
</h2>

<h2 >
  <span>TWO</span>
</h2>

<h2 >
  <span>THREE</span>
</h2>

CodePudding user response：

The easiest way to achieve what you want is by using a little bit of js like so :

window.onload = () => Array.from( document.getElementsByClassName('dynamic-hover-bg') ).forEach(div => Array.from( div.children ).forEach(e => {
        e.onmouseover  = () => div.style.backgroundImage = `url(${ e.dataset.bgUrl })`
        e.onmouseleave = () => div.style.backgroundImage = ''
    })
)

.wl-bg span:hover {
    color: #F24908 !important;
}

.wl-bg {
    width: fit-content;
}

.dynamic-hover-bg {
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: right;
}

<div >
  <h2  data-bg-url="https://images.ctfassets.net/hrltx12pl8hq/a2hkMAaruSQ8haQZ4rBL9/8ff4a6f289b9ca3f4e6474f29793a74a/nature-image-for-website.jpg">
    <span>ONE</span>
  </h2>
  
  <h2  data-bg-url="https://cdn.futura-sciences.com/sources/images/dossier/773/01-intro-773.jpg">
    <span>TWO</span>
  </h2>
  
  <h2  data-bg-url="https://res2.yourwebsite.life/res/5ef668f5db29eb0022cd0cd6/636f04c51f4f1b000d196c8c">
    <span>THREE</span>
  </h2>
</div>

Hope it helped you !