Question

这是非常简单的代码

 <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倍以上才能显示图像。

Google出现问题，但没有解决方案。

有人可以帮忙吗？

谢谢

Answer 1

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

$('.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" />

Answer 2

如果您可以将图像分组在一起，则应该使用纯CSS做到这一点。如果没有，请使用Taplar的答案。示例：

html：

<!-- repeat for all your images -->
    <div class="image-wrapper">
    <img class="img">
    <img class="image-on-hover">
    </div>

CSS：

.image-on-hover{
display:none
}

.img:hover ~.image-on-hover{
display: block
}

说明：悬停元素时，将触发CSS上的：hover Selector。使用〜选择器，您可以选择同一级别的子元素（您可以将其称为“邻居元素”）。由于我们不想显示所有相邻的悬停图像，因此将成对的图像和悬停图像包装在一起

如果您的分组与示例完全相同，则选择不同的选项：

.image-on-hover{
display: none;
}

/*repeat for every image pair */

#I1:hover ~ #myImage1{
display:block
}

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

2 个答案: