Something seems to be off with this topic. I am attempting to hover over a link and change the background image of a div element. The goal is to always display a different picture based on what is set in the data-rhomboid-img attribute.
<div id="img-nav-rhomboid" class="nav-rhomboid"></div>
<ul class="menu-list">
<li><a href="#" data-rhomboid-img="img/example1.jpg">A</a></li>
<li><a href="#" data-rhomboid-img="img/example2.jpg">B</a></li>
</ul>
.nav-rhomboid{
background: url(../img/nav-bg.png) no-repeat center center;
display: flex;
align-items: center;
}
$('li a').mouseover(function () {
var rhomboidImg = $(this).data('rhomboid-img');
$('#img-nav-rhomboid').each(function () {
$(this).css('background', $(this).attr(rhomboidImg));
});
});