Question

我想在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>

这是我编辑链接的CSS

.interests .fa-edit {
    display: none;
}

用于mouseenter和mouseleave事件的jquery

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

现在的问题是，上面的html结构重复了10次，我想要的是显示正在悬停的当前项目的编辑链接，而现在，当我将其中一个悬停时，它会显示所有网格中的所有编辑链接，我该如何解决这个问题请帮忙。

Answer 1

试试这个

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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="#">xxxxx <span class="fa fa-edit"> </span></a>
</div>

Answer 2

javacript / jQuery 代码的问题不，但html不正确。第二个div（<div class="col-md-3 col-sm-4 col-xs-12">）没有结束标记

<强> Live Demo

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

使用:hover css而不使用jQuery / Javascript

更好

<强> Live demo

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

Jquery：在mouseenter上使用show（）获取当前项目

2 个答案: