Trying to modify the displayed image based on the user's click on different text, my code is structured as follows:
$("#zubi a").hover(function() {
$("#pic").removeClass().addClass($(this).attr('rel'));
});#pic.p1 {
content: url("https://picsum.photos/id/236/200/300");
}
#pic.p2 {
content: url("https://picsum.photos/id/237/200/300");
}
#pic.p3 {
content: url("https://picsum.photos/id/238/200/300");
}
#pic.p4 {
content: url("https://picsum.photos/id/239/200/300");
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="zubi" class="row">
<div class="col-md-4 col-lg-2 mt-3 pb-3"><a class="dropdown-item" href="category.html">MEN'S WEAR</a></div>
<div class="col-md-4 col-lg-2 mt-3 pb-3"><a rel="p1" class="dropdown-item" href="category.html">WOMEN'S WEAR</a></div>
<div class="col-md-4 col-lg-2 mt-3 pb-3"><a rel="p2" class="dropdown-item" href="category.html">KID'S WEAR</a></div>
<div class="col-md-4 col-lg-2 mt-3 pb-3"><a rel="p3" class="dropdown-item" href="category.html">JEWELLERY</a></div>
<div class="col-md-4 col-lg-2 mt-3 pb-3"><a rel="p4" class="dropdown-item" href="category.html">OTHER</a></div>
<div class="col-md-0 col-lg-2"><img id="pic" style="margin-left:37%;height:90px;" class="mw-100 mh-100" src="https://picsum.photos/id/235/200/300" alt="pic" /></div>
</div>Upon hovering over the text, the image does not change. Can someone please point out what might be incorrect here? Thank you in advance.