在“unhovering”之后保持CSS悬停状态。 [英] Make CSS Hover state remain after "unhovering"

问题描述

我面对一个小问题，我从来没有真正处理过。我是一个初学者网页设计师，我最近在我的网页上使用了CSS悬停功能。当一个人悬停在这个div上时，另一个图像被显示;

I'm facing a small issue that I've never really had to deal with before. I'm a beginner web designer, and I recently used the CSS hover feature on a div on my webpage. Another image is revealed when one hovers over this div; however, the new image disappears when you "unhover", and I would like it to stay visible.

这里是我使用的代码示例：

Here is an example of the code that I am using:

#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到目前为止，我不是很舒服。

Is there any way to solve this using just CSS? I haven't used any javascript thus far and I'm not very comfortable with it.

任何一种方式，任何解决方案都将被高兴地接受！非常感谢。

Either way, any solutions will be gladly accepted! Thanks so much.

推荐答案

这里是我的CSS理念。

Here i go with my CSS idea.

您可以使用transition-delay;
http://jsfiddle.net/nAg7W/

You may use transition-delay; 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/

it could be possible as well, to click, so it fades away. 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);
}

这篇关于在“unhovering”之后保持CSS悬停状态。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！