jQuery实现鼠标划过展示大图的方法

可以使用jQuery的hover事件和CSS的position属性实现鼠标划过展示大图的效果。

首先，HTML部分需要在图片的外层包裹一个容器元素，并在容器元素中添加一个隐藏的大图。

<div class="img-container">
  <img src="small.jpg">
  <div class="large-img-container">
    <img src="large.jpg">
  </div>
</div>

接下来，使用CSS将大图容器的position属性设置为absolute，并将其隐藏起来。

.img-container {
  position: relative;
}

.large-img-container {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
}

最后，使用jQuery的hover事件监听鼠标的进入和离开事件，在进入事件中将大图容器显示出来，在离开事件中将大图容器隐藏起来。

$('.img-container').hover(function() {
  $(this).find('.large-img-container').show();
}, function() {
  $(this).find('.large-img-container').hide();
});

完整的代码如下：

<div class="img-container">
  <img src="small.jpg">
  <div class="large-img-container">
    <img src="large.jpg">
  </div>
</div>

<style>
  .img-container {
    position: relative;
  }

  .large-img-container {
    position: absolute;
    top: 0;
    left: 100%;
    display: none;
  }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $('.img-container').hover(function() {
    $(this).find('.large-img-container').show();
  }, function() {
    $(this).find('.large-img-container').hide();
  });
</script>