使用懸停替換圖像

-1

我正在試圖使4個圖像框在一行中都可以在懸停時進行替換。每張圖片都會有所不同，每張圖片所代替的圖片都會有所不同。使用懸停替換圖像

到目前爲止，我正在使用： .image1 background-image：url（「http://vipseogroup.com/amgv2/wp-content/uploads/2017/03/video-production.png」）; 身高：xx; width：yy; }

.image1：hover { background-image：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>

來源

2017-03-27 coneH34D

請提供您當前的代碼在任何codepen或的jsfiddle如果可能的話。 – Squeakasaur

添加到您的CSS：

div.image1 {float: left }

來源

2017-03-27 19:41:40 mayersdesign

如果你想在同一行你的div（連續）

display: inline-block;`

，或者你可以做

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

給你的css

來源

2017-03-27 19:42:12 Squeakasaur

添加父元素，並指定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>

來源

2017-03-27 19:43:45

我會漂浮他們。

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

，或者您也可以使顯示inline-block的

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

來源

2017-03-27 19:45:43 lhavCoder

使用懸停替換圖像

回答

相關問題