Html 使用鼠标悬停替换图像

我试图使4个图像框在一行都是可更换的悬停。每个图像都将是不同的，并且用它替换的每个图像都将是不同的

到目前为止，我正在使用： .image1{ 背景图片：url； 身高：xx； 宽度：yy； }

.image1：悬停{ 背景图片：url； }

a

当我试图将其中4个放在一行上时，它们在一列中对齐，而不是在一行上。我怎样才能把它们排成一排呢。谢谢

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

添加到您的CSS中：

div.image1 {float: left }

---

如果你想让你的div在一行中

display: inline-block;` 

或者你可以

display: flex; 
flex-flow: row; 
flex-direction: row; 

---

在css中添加父元素，并指定display:flex

.包裹{ 显示器：flex； } .image1{ 背景图像：urlhttp://vipseogroup.com/amgv2/wp-content/uploads/2017/03/video-production.png; 高度：100px； 宽度：100px； } .image1：悬停{ 背景图像：urlhttp://vipseogroup.com/amgv2/wp-content/uploads/2017/03/so-much-more.png; } 我会让它们漂浮起来

.image1{
float:left;
margin-left:5px;
margin-right:5px;
}

或者也可以使显示内联块

.image1{
display:inline-block;
margin-left:5px;
margin-right:5px;
}

---

如果可能，请以codepen或JSFIDLE格式提供当前代码。