Question

所以，我应该修改我的HTML和CSS文件，以便一旦用户用光标悬停在图像上，就可以将图像翻转到另一个图像。这是我的HTML代码，有我的照片。我不确定如何将图像翻转到我选择的另一张图像。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

您可以将图片包装在另一个标签中，例如<a>，然后使用:hover根据<a>的悬停状态显示/隐藏图片：

＆＃13;

.image-swap {
  display: inline-block;
}

a .on_hover {
  display: none;
}

a:hover .on_hover {
  display: block;
}

a:hover .off_hover {
  display: none;
}

＆＃13;

<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>

＆＃13;

图像滚过和悬停

1 个答案: