鼠标划过多张小图显示对应大图

实现鼠标划过多张小图显示对应大图的效果，可以使用jQuery的hover()方法和data()方法来动态获取和设置元素的自定义数据属性。具体实现方法如下：

HTML代码：

<div class="thumbnail-container">
  <div class="thumbnail" data-large="large-1.jpg">
    <img src="small-1.jpg" alt="thumbnail 1">
  </div>
  <div class="thumbnail" data-large="large-2.jpg">
    <img src="small-2.jpg" alt="thumbnail 2">
  </div>
  <div class="thumbnail" data-large="large-3.jpg">
    <img src="small-3.jpg" alt="thumbnail 3">
  </div>
  <div class="thumbnail" data-large="large-4.jpg">
    <img src="small-4.jpg" alt="thumbnail 4">
  </div>
</div>
<div class="image-container">
  <img src="large-1.jpg" alt="large image">
</div>

CSS代码：

.thumbnail-container {
  display: flex;
  justify-content: space-between;
}

.thumbnail {
  flex-basis: 25%;
  position: relative;
}

.thumbnail img {
  width: 100%;
  height: 100%;
}

.thumbnail:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.thumbnail:hover img {
  opacity: 0.7;
}

.image-container {
  margin-top: 20px;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: auto;
}

jQuery代码：

$(document).ready(function() {
  $('.thumbnail').hover(function() {
    var largeImg = $(this).data('large');
    $('.image-container img').attr('src', largeImg);
  });
});

这段代码会在页面加载完成后执行，当鼠标滑过thumbnail元素时，会获取其data-large属性值，将其赋值给image-container元素中的img元素的src属性，从而显示对应的大图。通过设置thumbnail元素的伪元素和img元素的透明度来实现鼠标滑过小图的效果。