基本的CSS懸停圖像交換？

我是一個在網絡開發超級初學者，我有一個關於試圖「交換」兩個圖像的問題。基本的CSS懸停圖像交換？

我有這個CSS和標記寫入，但由於某種原因，它似乎並沒有工作。當將鼠標懸停在第一張圖片上時，應該交換的第二張圖片僅位於頁面上第一張圖片的頂部。

CSS：

.home { 
    margin: 0; 
    padding: 0; 
    background: url('images/onhome.png') no-repeat; 
} 

.home a, .nav a:link, .nav a:visited { 
    display: block; 
    width: 90px; 
    height: 25px; 
} 

.home a:hover img { 
    visibility: hidden; 
}

HTML：

<div class="home"> 
    <a href="#"> 
    <img src="style/images/home.png" width="65" height="18" alt="" /> 
    </a> 
</div>

我不知道發生了什麼事情錯了，我會很感激，如果有人能幫助我。如果還有另一種更好的方法來做到這一點，我也絕對會這樣做。

來源

2013-03-18 Rowan K.

你的背景圖片是不是'img'。嘗試使用不同圖像的'background-position'來代替。 – 2013-03-18 00:37:08

@Titanium不，它不。 – 2013-03-18 00:38:20

@ jimjimmy1995 - 你說得對，我在那裏跳了一槍。 – 2013-03-18 00:39:13

一種方法是忘記<img>，並在:hover更改背景圖片的URL。

#home { 
    background: url(http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/grey-wolf_565_600x450.jpg) no-repeat; 
    height: 600px; 
    width: 600px; 
} 

#home:hover { 
    background: url(http://25.media.tumblr.com/tumblr_m6fmnhxL3B1r7wu2mo1_500.jpg) no-repeat; 
}

工作例如：http://jsfiddle.net/c9sRa/

如果你把光標移到狼它將改變一個圖片幼虎:-)

來源

2013-03-18 00:39:47 ktm5124

非常感謝您的回覆，現在就試試看看！ – 2013-03-18 00:41:59

有很多方法可以做到這一點。另一個是使用JavaScript。我想最好的辦法取決於你的情況。 – ktm5124 2013-03-18 00:44:23

由於某種原因，現在我甚至無法在頁面上看到完整的圖像。是否因爲我有一個覆蓋它的背景圖像模式？不過，它看起來像懸停效果正在起作用。 – 2013-03-18 00:49:24

基本的CSS懸停圖像交換？

回答

相關問題