<a class="link" href="#" data-img="img1.png">Link 1</a>
<a class="link" href="#" data-img="img2.png">Link 2</a>
<a class="link" href="#" data-img="img3.png">Link 3</a>
<div class="div1"></div>
var links = document.getElementsByClassName('link');
for (var i = 0; i < links.length; i++) {
links[i].addEventListener('hover', function() {
let img = links[i].getAttribute('data-img');
document.getElementsByClassName('div1')[0].style.background-image = img;
});
}
.logo {
background-image: url('../img/logo.png');
height: 222px;
width: 409px;
&:after {
background-image: url("../img/bg-helper.png");
content: "";
display: block;
height: 222px;
margin-left: -389px;
position: absolute;
width: 389px;
}
}