Change section background when hover div

by witsec

HTML

<section class="mySection">

<div class="hoverMe">
  Hover this div
</div>
  
</section>

CSS

section {
  background: url(https://mobirise.com/extensions/artm4/art-studio/assets/images/features1.jpg);
  width: 100%;
  height: 400px;
}

.hoverMe {
  background-color: yellow;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
	let bg = null;

	document.querySelector(".hoverMe").addEventListener("mouseover", function(e) {
  	let s = document.querySelector(".mySection");
  	bg = s.style.backgroundImage;
    s.style.backgroundImage = "url(https://mobirise.com/extensions/artm4/art-studio/assets/images/features2.jpg)";
	});
  
	document.querySelector(".hoverMe").addEventListener("mouseout", function(e) {
  	let s = document.querySelector(".mySection");
    s.style.backgroundImage = bg;
	});
});