html - 图像滚动并悬停

Question

因此，我应该修改我的 HTML 和 CSS 文件，以便在用户将光标悬停在图像上时允许图像滚动到不同的图像。这是我的 HTML 代码，里面有我的照片。我不太确定如何使图像滚动到我选择的另一个图像。

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
  width: 850px;
  margin: 0 auto;
  border: 3px solid #931420;
  background-color: #fffded;
}

a:focus,
a:hover {
  font-style: italic;
}

<section>
    <h1>An Image Rollover Using Background Images</h1>
    <img src="../images/sampson_dinosaur.jpg" alt="Scott Sampson 
           with dinosaur">
</section>

Answer 1

您可以将图像包裹在另一个标签中，比如 <a> ，并使用 :hover根据 <a> 的悬停状态显示/隐藏图像:

.image-swap {
  display: inline-block;
}

a .on_hover {
  display: none;
}

a:hover .on_hover {
  display: block;
}

a:hover .off_hover {
  display: none;
}

<section>
    <h1>An Image Rollover Using Background Images</h1>
    <a class="image-swap">
        <img src="http://placehold.it/400x200/" alt="Scott Sampson 
     with dinosaur" class="off_hover">
        <img src="http://lorempixel.com/400/200/" alt="Scott Sampson 
     with dinosaur" class="on_hover">
     </a>
</section>