我面临着一个我以前从未真正处理过的小问题。我是一个初学者网页设计师，最近我在我的网页上的一个div上使用了CSS悬停功能。当一个鼠标悬停在这个div上时，会显示另一个图像；但是，当您“取消覆盖”时，新图像将消失，我希望它保持可见
下面是我正在使用的代码示例：
关于{
高度：25px；
宽度：84px；
背景图片：url（’about.png’）；
位置：绝对位置；
顶部：200px；
左：0px；
}
#奥纳布特{
高度：200px；
宽度：940px；
位置：绝对位置；
顶部：60px；
左：0px；
颜色：#fff；
字体系列：“Lato”，无衬线；
字体大小：15px；
字体大小：300；
显示：无；
}
#关于：悬停{
显示：块；
}
有没有办法只用CSS来解决这个问题？到目前为止，我还没有使用任何javascript，我对它不是很满意
无论如何，任何解决方案都会被欣然接受！非常感谢
在这里，我同意我的CSS想法
您可以使用转换延迟；
http://jsfiddle.net/nAg7W/
div img{
位置：绝对位置；
不透明度：0；
过渡：0s-180s；
}
分区：悬停图像{
不透明度：1；
转换：0s；
}
div{
线高：1.2米；
字号：1em；
颜色：黑色；
过渡：0s-180s；
}
div:悬停{
线高：0；
字号：0；
颜色：透明；
过渡期：0；
}
标记：
<；部门>；当您阅读此内容时，要悬停一些文本以查看隐藏的图像
<；img src=”http://placehold.it/200x200&；text=zi图像”/>；
也可以单击，使其消失。
http://jsfiddle.net/nAg7W/1/
div:hover-img:focus{/*在img的html标记中包含tabindex*/
不透明度：0；
过渡期：3s；
-webkit变换：旋转（-360度）比例（0.23）；
-webkit变换：旋转（-360度）比例（0.23）；
-moz变换：旋转（-360度）比例（0.23）；
-o变换：旋转（-360度）比例（0.23）；
-ms变换：旋转（-360度）比例（0.23）；
变换：旋转（-360度）比例（0.23）；
}