更改鼠標懸停和鼠標懸停在CSS中的圖像

我使用下面提到的代碼來生成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>

來源

2016-01-24 Muhammad Afzal

如果它只是關於圖像（沒有文字），那麼一個img標籤可以這樣做：http://codepen.io/gc-nomade/pen/Byqepv一些示例效果，點擊作品也是http：// codepen。 IO/GC-NOMADE /筆/ nifaq –

轉期是狀態是在CSS二進制，一個元件被要麼正在盤旋或不是。你需要使用JavaScript來做你想做的事。

來源

2016-01-24 17:14:27

嘗試了這一點：使用同一div包含圖像

<div class="mainimg">

並使用CSS懸停改變圖像背景

.mainimg { 
    background-image:url(1.jpg); 
    height: 300px; 
    width: 300px; 
    transition: 1s; 
} 
.mainimg:hover { 
    background-image:url(2.jpg); 
    transition: 1s; 
}

來源

2016-01-24 17:25:37 Med7at

什麼@Franz這樣說是正確的，你必須使用JavaScript 3e圖像。也@ @ Med7at說的嘗試使用一個div和更改圖像通過:hover

這應該爲你工作。

我用id而不是class所以只有一個項目會隨着這些圖像而改變。

我使用的顏色，所以你可以看到differents。

var mouseOut = document.getElementById("mainimg"); 
 

 
mouseOut.onmouseout = function() { 
 
    this.style.backgroundColor = "orange"; //this.style.background = "url(3.jpg)" 
 
}

#mainimg{ 
 
    background:blue; /*background-image:url(1.jpg);*/ 
 
    height: 300px; 
 
    width: 300px; 
 
    transition: 1s; 
 
} 
 

 
#mainimg:hover{ 
 
    background:red; /*background-image:url(2.jpg);*/ 
 
    background-size:500px 500px; /* this will make the 3 img look missplaced for 1 second. 
 
}

<div id="mainimg"></div>

看你應該把什麼在該行，使其與圖像工作的意見。

來源

2016-01-24 18:04:59 Max

更改鼠標懸停和鼠標懸停在CSS中的圖像

回答

相關問題