时间戳

首页 > 解决方案 > 仅在鼠标悬停 2 次后显示图像？

jquery - 仅在鼠标悬停 2 次后显示图像？

问题描述

这是非常简单的代码

 <img src="images/Card.png" id=I1 class="img"/> 
 <img src="images/Card.png" id=I2 class="img"/> 
 <img src="images/Card.png" id=I3 class="img"/> 
 <img src="images/Card.png" id=I4 class="img"/> 

 <img src="images/Capture1.JPG" id="myImage1" style="display: none ; " />
 <img src="images/Capture2.JPG" id="myImage2" style="display: none ; " />
 <img src="images/Capture3.JPG" id="myImage3" style="display: none ; " />
 <img src="images/Capture4.JPG" id="myImage4" style="display: none ; " />

<script>
 $('.img').mouseover(function() {

        var GetId = this.id.substring(1);

        $("#I" + GetId).hover(
        function () { $("#myImage" + GetId ).show();  },
        function () { $("#myImage" + GetId ).hide();  }  ); 

    });
</script>

它工作正常，但它有一个问题，你需要将鼠标放在 2 次才能显示图像。

谷歌问题，但没有解决方案。

任何人都可以帮忙吗？

谢谢

标签： jqueryhtmlonmouseover

解决方案

通过使用鼠标悬停图像上的数据字段，您可以简化逻辑并解决过程中的问题。

$('.img')
  .on('mouseenter', function(){
    $('#'+ $(this).data('target')).show();
  })
  .on('mouseleave', function(){
    $('#'+ $(this).data('target')).hide();
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/Card.png" id=I1 class="img" data-target="myImage1" />
<img src="images/Card.png" id=I2 class="img" data-target="myImage2" />
<img src="images/Card.png" id=I3 class="img" data-target="myImage3" />
<img src="images/Card.png" id=I4 class="img" data-target="myImage4" />

<img src="images/Capture1.JPG" id="myImage1" style="display: none ; " alt="image1" />
<img src="images/Capture2.JPG" id="myImage2" style="display: none ; " alt="image2" />
<img src="images/Capture3.JPG" id="myImage3" style="display: none ; " alt="image3" />
<img src="images/Capture4.JPG" id="myImage4" style="display: none ; " alt="image4" />

推荐阅读