我使用下面提到的代碼來生成CSS過渡效果。 div顯示第一個圖像(即1.jpg),當鼠標懸停時,第二個圖像(2.jpg)通過CSS轉換出現,當鼠標移出時,第一個圖像返回顯示。更改鼠標懸停和鼠標懸停在CSS中的圖像
我需要鼠標移出第三張圖片,所以請幫助我如何通過CSS來做到這一點。
我的編碼是作爲下:
.mainimg
{
background-image:url(1.jpg);
height: 300px;
width: 300px;
transition: 1s;
}
.img2
{
background-image:url(2.jpg);
background-size:500px 500px;
width:0px;
height:300px;
transition:1s
}
.mainimg:hover .img2
{
width:300px;
transition:1s;
}
<div class="mainimg">
<div class="img2"></div>
</div>
如果它只是關於圖像(沒有文字),那麼一個img標籤可以這樣做:http://codepen.io/gc-nomade/pen/Byqepv一些示例效果,點擊作品也是http:// codepen。 IO/GC-NOMADE /筆/ nifaq –