How do I change an image in CSS with the following condition - html

Question

This is the style for the image :
.gaming{
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
background-image:url("gaming.jpg");
height:100%;
border:#00AEF2 3px;
}
and this one for the element I intend to do a hover effect which changes the background-image in .gaming:
<section class="New-era-1 list_text" >Artificial Intelligence</section>
What I tried
.New-era-1:hover .gaming{
background-image:url("just-for-fun.jpg")
}
But no luck. How do we go about this problem?

Answer 1

The way you're targeting your .gaming class means the HTML element associated with it needs to be inside the .new-era-1 <section> element. It should work after that. See below:
CSS
.gaming{
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
background-image:url("http://www.alien-covenant.com/app/xalien-covenant-fill.jpg.pagespeed.ic.rPyCbS72Kx.jpg");
height:500px;
width: 400px;
border:#00AEF2 3px;
}
.New-era-1:hover .gaming{
background-image:url("https://i1.fdbimg.pl/fvpxi5v1_o6b4xt.jpg")
}
HTML
<section class="New-era-1 list_text" >Artificial Intelligence
<div class="gaming"></div>
</section>
See my JSFiddle: https://jsfiddle.net/0esrq2by/

Answer 2

Another approach is to use jquery, to change hover effect, like this:
$('.new-era-1').hover(){
$('.gaming').css('background-image', 'url(to-your-image.jpg)');
}