CSS单击事件

Question

所以我找到了一个小提琴示例,:hover用作隐藏div标签的选择器,直到在选定区域上隐藏某些东西.我一直在做一些研究,但无济于事,我怎么会改变:hover一些更像是"onclick"的东西

http://jsfiddle.net/rakesh_vadnal/RKxZj/1/

HTML

<div id="button"><h3>button</h3>
    <div id="two">Hovered content</div>
</div>

CSS

#button {
    background:#FFF;
    position:relative;
    width:100px;
    height:30px;
    line-height:27px;
    display:block;
    border:1px solid #dadada;
    margin:15px 0 0 10px;
    text-align:center;
}
#two {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #DADADA;
    color: #333333;
    width:98px;
    height: 0;
    overflow:hidden;
    left: 0;
    line-height: 20px;
    position: absolute;
    top: 30px;
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    transition: all .3s ease;
}
#button:hover > #two {
    display:block;
    left:0px;
    height:100px;
}

Answer 1

:active表示"激活此元素时".一个条件是鼠标点击,但通常是在按下鼠标按钮时; 这不是持久的.

如果你需要持久性,你<details>最终可以使用一个元素; 与此同时,一个隐藏的复选框与a <label>和一个选择器相结合:checked + .something是很常见的.您也可以考虑在此时使用JavaScript.

顺便提一下,请记住尊重键盘焦点.