I am struggling with a hover effect on my webpage. I have three visible elements and three hidden elements, and I want each visible element to display only one hidden element when hovered over. However, the issue is that currently, hovering over a visible element reveals all three hidden elements instead of just one. I attempted to use the jQuery each function in my code but it seems to be ineffective. Can someone help me identify what I am doing wrong? Below is the snippet of my code:
$(document).ready(function(){
$( ".thumbnail-top" ).each(function() {
$( this ).mouseover(function(){
$(".productImageBox-1").fadeIn('400');
});
$( this ).mouseout(function(){
$(".productImageBox-1").fadeOut('400');
});
});
});.thumbnail-top {
position:relative;
float:left;
margin:5px;
}
.product-thumbnail {
width:200px;
height:100px;
display:block;
padding:1rem;
color:#fff;
text-align:center;
cursor:pointer;
}
.productImageBox-0 {
background:blue;
}
.productImageBox-1 {
background:red;
position:absolute;
top:0;
left:0;
z-index:1;
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thumbnail-top">
<a class="product-thumbnail productImageBox-0">I AM A BLUE BOX</a>
<a class="product-thumbnail productImageBox-1">NOW I AM A RED BOX</a>
</div>
</div>
<div class="thumbnail-top">
<a class="product-thumbnail productImageBox-0">I AM A BLUE BOX</a>
<a class="product-thumbnail productImageBox-1">NOW I AM A RED BOX</a>
</div>
</div>
<div class="thumbnail-top">
<a class="product-thumbnail productImageBox-0">I AM A BLUE BOX</a>
<a class="product-thumbnail productImageBox-1">NOW I AM A RED BOX</a>
</div>
</div>