I am facing an issue where the class .hover and .over are added to the entire list whenever I mouseover any list item. I understand that this is happening due to my jQuery code, but I would like to find a way for jQuery to only add the class to the specific list anchor being hovered over instead of all of them at once.
$('.menuContainer li a').append('<span></span>');
$(".menuContainer li a").mouseover(
function() {
$(this).addClass("over");
$('.menuContainer li a span').addClass('hover');
return false;
});
$(".menuContainer li a").mouseout(
function() {
$(this).removeClass("over");
$('.menuContainer li a span').removeClass('hover');
return false;
});
<div class="menuContainer">
<ul>
<li class="1">
<a href="#">list item<span></span></a>
</li>
<li class="2">
<a href="#">list item<span></span></a>
</li>
<li class="3">
<a href="#">list item<span></span></a>
</li>
</ul>
</div>
I aim to use the .hover class to display a background image as a pointer to highlight the currently hovered item in the list.