Javascript Jquery:对鼠标指针上的当前项使用show（）

我想在mouseenter事件上显示编辑链接，然后在mouseleave上隐藏它，这是我的html结构

<div class="row interests">
    <div class="col-md-3 col-sm-4 col-xs-12">
    <img src="images/int/1.jpg">
    <p>Sports</p>
    <a href="#"> <span class="fa fa-edit"> </span></a>
</div>

mouseenter和mouseleave事件的jquery

 $(document).ready(function(){
     $('.interests').mouseenter(function(){
         $(this).find('.fa-edit').show();
     }).mouseleave(function(){
         $(this).find('.fa-edit').hide();
     });
 });

现在的问题是，上面的html结构重复了10次，我想要的是显示悬停的当前项目的编辑链接，而其中一个现在显示所有网格中的所有编辑链接，当我悬停其中一个时，如何修复此问题请帮助。

尝试此操作

$（文档）.ready（函数（）{
$（'.interests'）.mouseenter（函数（）{
$（this.find（'a span.fa edit'）.parent（）.show（）；
}).mouseleave（函数（）{
$（this.find（'a span.fa edit'）.parent（）.hide（）；
});
});

运动

问题在于，JavaScript/jQuery代码不存在问题，但html不正确。第二个div（
）没有结束标记


<div class="row interests">
  <div class="col-md-3 col-sm-4 col-xs-12">
    <img src="images/int/1.jpg">
    <p>Sports</p>
    <a href="#"> <span class="fa fa-edit">1 </span></a>
  </div>
</div>

.interests:hover .fa-edit {
    display: block;
}

项目表示在10个兴趣中，我将鼠标悬停在1（兴趣类）上，需要在该兴趣类内显示编辑链接。您是说外部的“.interests”div重复10次吗？不清楚，因为代码片段在第2行有一个内部div开始标记，但只有一个结束标记。如果外部“.interests”重复，那么JS应该可以工作。（尽管这两种方法都可以通过CSS样式实现，但不需要JS。）事实已经如此（如果关闭outer div…）。所以提供MCVE复制您的问题好的，我更改了选择器如下：$（'.interests.col-md-3'）.mouseenter（function（）{$（this）.find（'.fa edit'）.show（）；那worked@Sikander为什么不使用有效的HTML标记呢？这意味着关闭所有相关的div。那么只使用CSS呢？
.interests:hover .fa-edit {
    display: block;
}