在"unhovering"之后使CSS Hover状态保持不变

Question

我面临一个小问题,我以前从未真正处理过.我是初学网页设计师,最近我在网页上的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,我对它不太满意.

无论哪种方式,任何解决方案都将很乐意接受!非常感谢.

Answer 1

在这里,我采用我的CSS想法.

你可以使用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/

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);
}

Answer 2

正如@ Leo Pflug指出的那样,您可以通过使用http://cssconf.com/talk-seddon.html中详述的技术在点击之后和之后对CSS和HTML充满信心.

使用一些JavaScript,它可以简单可靠,如@ Wind Shear所示.

然而,在悬停之上和之后的纯CSS更加困难,并且取决于您需要支持的浏览器,在当前生产可行的方式中是不可能的.问题是您使用:hover伪类选择器更改的任何内容都不会(和/或不应该)匹配您不再悬停的元素.

使用纯CSS可以实现此功能的唯一方法是使用CSS3动画.为此,我创建了一个演示http://cdpn.io/GLjpK(v2 w/FF&IE),它使用CSS动画在悬停时交换到悬停状态,然后保持该状态直到重新加载页面.

@keyframes hover {
  0% {
    // normal styles
  }
  100% {
    // hover styles
  }
}

.class {
  animation-name: hover;
  animation-duration: 1ms;
  animation-fill-mode: backwards;
  animation-play-state: paused;      
}

.class:active,
.class:focus,
.class:hover {
  animation-fill-mode: forwards;
  animation-play-state: running;
}

我测试了Chrome最新版本,Firefox最新版本和IE 10版本.

注意我在codepen没有显示最新保存的代码时遇到了一些麻烦,所以我在这里创建了一个新的http://cdpn.io/GLjpK.

见在迭代计数的最后一帧停止CSS3动画和最后一帧上停止一个CSS3动画什么/为什么/如何.

更新:Lea Verou现在也在她的帖子中使用动画播放状态演示了这种技术

Answer 3

您不能使用CSS永久保留为悬停状态,因为它仅定义了样式化标记,类,ID,伪类和状态的规则.所以不幸的是,你需要Javascript来解决问题.

作为jQuery库(hehehe)的粉丝,这是我的解决方案.

CSS

ul li ul {
    display: none;
}
ul li.permahover ul {
    display: block;
}

使用jQuery的Javascript

$("#onabout").one("mouseover", function() {
  $("#onabout").addClass('permahover');
});

该one事件将处理程序附加到元素的事件.每个元素最多执行一次处理程序.

演示

http://jsfiddle.net/jlratwil/w83BW/

Answer 4

它必须使用JavaScript完成,使用jquery你可以永久添加这样的样式:

$(#onabout).onmouseover().css("display","block");