如何在懸停css時切換背景圖片？

我有兩個文字圖像。一個使用普通文本，另一個使用相同的文本但具有發光效果。事情是我想要發光圖像到取代徘徊的常規。，而是發光圖像出現在另外到正常的一個。請幫忙！ thanx提前這裏是代碼...的背景圖像屬性是一個註釋塊，因爲常規的文本圖像定義爲IMG SRC INT HTML文件如何在懸停css時切換背景圖片？

#groundPlainLink 
{ 
height:56px; 
width: 170px; 
margin-left:476px; 
float:left; 
/*background-image:url("../images/txt_menu_ground_plane_pc.png");*/ 
} 
#groundPlainLink:hover 
{ 
background-image: url("../images/txt_menu_ground_plane_glow_pc.png"); 
}

來源

2013-05-31 Daniel

看樣子此外，因爲IMG元素呈現在背景圖像之上。爲什麼不使用CSS，並跳過IMG元素？

來源

2013-05-31 19:25:08 landons

你是什麼意思？順便說一句，IMG是在一個鏈接（>） – Daniel

對，圖像是在'a＃groundPlainLink'裏面，對吧？你將圖形文件加倍，因爲'IMG'和CSS背景圖像都是相互顯示的。 – landons

upvoted這個答案，因爲它是唯一一個不是沒心沒肺的「修復」。 – PlantTheIdea

你必須在懸停時隱藏圖像。

#groundPlainLink img:hover { opacity:0; }

但是，如上所述，去除img並依賴於背景圖像會更容易和更簡單。

編輯：或者，風格的元素，而不是div元素，然後把文本內的鏈接與font-size:0。這將做你正在尋找的東西，仍然是屏幕閱讀器/可訪問性/搜索引擎優化。

來源

2013-05-31 19:28:31

小提琴

https://jsfiddle.net/Hastig/jd23mcnx/

HTML

<a class="image-link"> 
    <img class="image-default" src="http://i.imgur.com/c0lfxLU.png"> 
    <img class="image-hover" src="http://i.imgur.com/yfNIfVR.jpg">  
</a>

CSS

.image-link { 
    display: block; 
    width: 500px; 
    margin: 20px auto 0px auto; 
} 

.image-link img { 
    width: 500px; height: 300px; 
} 

.image-hover { 
    display: none; 
} 

.image-link:hover .image-default { 
    displaY: none; 
} 

.image-link:hover .image-hover { 
    display: block; 
}

來源

2015-04-08 14:20:37

如何在懸停css時切換背景圖片？

回答

相關問題