html - 使用悬停替换图像

Question

我试图在一行中制作 4 个图像框，这些图像框都可以在悬停时更换。每张图片都不同，替换它的每张图片也不同。

到目前为止，我正在使用:.image1 { 背景图像:url(“http://vipseogroup.com/amgv2/wp-content/uploads/2017/03/video-production.png”)； 高度:xx； 宽度:yy；

.image1:悬停{ 背景图像:url(“http://vipseogroup.com/amgv2/wp-content/uploads/2017/03/so-much-more.png”)；

一个

当我试图将其中的 4 个放置在一行中时，它们在一列而不是一行中对齐。我如何让他们排成一排。谢谢

<div class="image1"></div>
<div class="image1"></div>
<div class="image1"></div>
<div class="image1"></div>

Answer 1

添加一个父元素，并赋值display: flex;

.wrap {
  display: flex;
}

.image1 {
  background-image: url("http://vipseogroup.com/amgv2/wp-content/uploads/2017/03/video-production.png");
  height: 100px;
  width: 100px;
}

.image1:hover {
  background-image: url("http://vipseogroup.com/amgv2/wp-content/uploads/2017/03/so-much-more.png");
}

<div class="wrap">
  <div class="image1"></div>
  <div class="image1"></div>
  <div class="image1"></div>
  <div class="image1"></div>
</div>