鼠標懸停改變圖像

我有一個簡單的HTML/CSS頁面，在那裏我顯示一張圖片。鼠標懸停改變圖像

現在當用戶在圖片上移動鼠標時，我想將圖片換成其他圖片。
離開圖像區域後，應再次顯示舊圖像。

我該如何做到這一點？沒有javascript的版本是最好的。

在此先感謝！

來源

2009-09-23 Sam

您可以使用CSS來改變元素的背景圖像，當你在它懸停。 hover僞類在最近的瀏覽器中的大多數元素上都受支持，但爲了向後兼容（Internet Explorer 6），您需要使用hover的定位標記來工作。

鏈接中的onclick事件只是讓您點擊它而沒有任何反應，它與懸停效果沒有任何關係。如果你喜歡，你可以點擊圖像時做點什麼。

HTML：

<a href="#" id="picture" onclick="return false;"></a>

CSS：

#picture { 
    display: block; 
    width: 200px; 
    height: 200px; 
    background-image: url(firstimage.gif); 
    border: none; 
    text-decoration: none; 
} 
#picture:hover { 
    background-image: url(hoverimage.gif); 
}

來源

2009-09-23 19:36:55 Guffa

我從來沒有想到這一點。我想我會做一個有條件的<！ - [if IE 6]> javascript解決方案來重新使用標記語義上不正確的元素，但那只是我。 – 2009-09-23 19:40:22

This似乎相當簡潔，寫得很好（注：CSS翻滾的解決方案將無法在IE6工作。）

來源

2009-09-23 19:25:17

如果使用這隻會工作在IE6：懸停在錨元素。 IE6不支持：將鼠標懸停在其他元素上。 – klaaspieter 2009-09-23 19:31:00

有沒有辦法做到：懸停在IE6除了錨點標籤，沒有辦法在css中沒有：懸停psudo類做翻車。 – 2009-09-23 19:37:01

<img src="https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png" onmouseout="this.src='https://pbs.twimg.com/profile_images/677544618326556672/WID2m1_a.png'" onmouseover="this.src='https://pbs.twimg.com/profile_images/638751551457103872/KN-NzuRl.png'" alt="image" width="50px" height="50px">

來源

2016-06-15 12:10:50

鼠標懸停改變圖像

回答

相關問題