Jquery鼠标悬停显示对应元素问题求助：each循环失效

我有3个可见元素和3个隐藏元素，希望鼠标悬停每个可见元素时仅显示对应的单个隐藏元素。但目前鼠标悬停时会显示全部3个隐藏元素，我使用了jQuery each函数却无效，请问问题出在哪？

原代码 #

JavaScript

$(document).ready(function(){

    $( ".thumbnail-top" ).each(function() {
        $( this ).mouseover(function(){
      $(".productImageBox-1").fadeIn('400');
      });
      $( this ).mouseout(function(){
        $(".productImageBox-1").fadeOut('400');
        });

      });

});

CSS

.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;
}

HTML

<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>

问题根源 #

你用了each循环给每个.thumbnail-top绑定事件，但事件内部的$(".productImageBox-1")是全局选择器——它会选中页面上所有带这个类的元素，所以鼠标悬停时所有隐藏的红色盒子都会一起显示，和循环本身无关。

修正方案 #

核心是把选择范围限定在当前触发事件的.thumbnail-top容器内，同时修复HTML里多余的闭合标签：

修正后的JavaScript

$(document).ready(function(){
    $(".thumbnail-top").each(function() {
        $(this).mouseover(function(){
            // 只查找当前容器内的目标隐藏元素
            $(this).find(".productImageBox-1").fadeIn(400);
        });
        $(this).mouseout(function(){
            $(this).find(".productImageBox-1").fadeOut(400);
        });
    });
});

修正后的HTML

<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 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 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>

CSS无需修改

保持原CSS即可。

内容的提问来源于stack exchange，提问作者Designer