我正面临一个我从未真正处理过的小问题。我是初学者网页设计师，我最近在我的网页上的div上使用了CSS悬停功能。当一个徘徊在这个div上时，另一个图像被显示出来然而，当您“不起眼”时，新图像消失，我希望它保持可见。
以下是我使用的代码示例：
#about {
height: 25px;
width: 84px;
background-image: url('about.png');
position: absolute;
top: 200px;
left: 0px;
}
#onabout {
height: 200px;
width: 940px;
position: absolute;
top: 60px;
left: 0px;
color: #fff;
font-family: 'Lato',sans-serif;
font-size: 15px;
font-weight: 300;
display: none;
}
#about:hover #onabout {
display: block;
}
有没有办法解决这个使用CSS？我迄今没有使用任何JavaScript，我不太舒服。
无论哪种方式，任何解决方案都将被乐意接受！非常感谢。
解决方法
这里我用我的CSS想法去。
你可以使用转换延迟;
http://jsfiddle.net/nAg7W/
div img {
position:absolute;
opacity:0;
transition:0s 180s;
}
div:hover img {
opacity:1;
transition:0s;
}
div {
line-height:1.2em;
font-size:1em;
color:black;
transition:0s 180s;
}
div:hover {
line-height:0;
font-size:0;
color:transparent;
transition:0;
}
标记：
<div>some text to hover to see an image wich is hidden as you read this <img src="http://placehold.it/200x200&text=zi image" />
也可以点击，所以它会消失。
http://jsfiddle.net/nAg7W/1/
div:hover img:focus {/* includes tabindex in html tag for img */
opacity:0;
transition:3s;
-webkit-transform:rotate(-360deg) scale(0.23);
-webkit-transform:rotate(-360deg) scale(0.23);
-moz-transform:rotate(-360deg) scale(0.23);
-o-transform:rotate(-360deg) scale(0.23);
-ms-transform:rotate(-360deg) scale(0.23);
transform:rotate(-360deg) scale(0.23);
}
