html – 使用css显示悬停图像时隐藏背景图像

概述我使用CSS进行悬停并且它可以工作,但悬停图像允许背景图像(pic_normal)在图像后面显示为透明(pic_hover). 当鼠标悬停在它上面时如何只显示悬停图像？ HTML <img id="first" src="images/clients/pic_normal.png" /> CSS #first img:hover { background-image: url("/imag 我使用CSS进行悬停并且它可以工作,但悬停图像允许背景图像(pic_normal)在图像后面显示为透明(pic_hover).

当鼠标悬停在它上面时如何只显示悬停图像？

HTML

<img ID="first" src="images/clIEnts/pic_normal.png" />

CSS

#first img:hover {    background-image: url("/images/clIEnts/pic_hover.png");    background-repeat: no-repeat;}

解决方法 您的CSS按预期工作正常 – 它会更改img元素的背景.将pic_normal.png视为元素的内容(例如,某些文本).更改背景时,内容不会更改.

试试这个 – http://jsfiddle.net/WvKye/

<div ID="first"></div>#first {    background: url("images/clIEnts/pic_normal.png") no-repeat;    height: 300px;    wIDth: 300px;}#first:hover {    background: url("images/clIEnts/pic_hover.png") no-repeat;}​

总结

以上是内存溢出为你收集整理的html – 使用css显示悬停图像时隐藏背景图像全部内容，希望文章能够帮你解决html – 使用css显示悬停图像时隐藏背景图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。