像jQuery的.click（）一样工作的CSS3选择器？
我几年来一直在使用纯CSS导航，最近我们开始在我工作的公司建立一堆移动网站。 我真的想继续使用纯CSS，并注意依赖jQuery，但在移动网站上，下拉菜单无法正常工作。
是否有类似jQuery的.click(); CSS3中的事件？ 基本上，当用户点击导航链接时，我希望下拉菜单打开并保持打开状态。 我试过环顾四周，但似乎找不到任何东西。
您可以使用:target选择器来获得一些基本function。 请参阅Chris Coyier关于它的post 。 请注意，更广泛的支持 。
编辑：快速演示
给定一些基本的HTML结构，您可以重新创建JavaScript实现的切换（显示/隐藏）function：
使用:target ：
HTML：
show navigation hide navigation
CSS：
nav { height: 0; overflow: hidden; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; -webkit-transition: all 1s linear; transition: all 1s linear; } nav:target { height: 4em; color: #000; background-color: #ffa; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; -webkit-transition: all 1s linear; transition: all 1s linear; }
JS小提琴演示 。
使用:checked ：
HTML：
CSS：
#switch { display: none; } #switch + nav { height: 0; overflow: hidden; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; -webkit-transition: all 1s linear; transition: all 1s linear; } #switch:checked + nav { height: 4em; color: #000; background-color: #ffa; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; -webkit-transition: all 1s linear; transition: all 1s linear; } label { cursor: pointer; }
JS小提琴演示 。
不幸的是，最接近的替代原生CSS，对于’ :clicked ‘选择器是:active或:focus伪类，一旦释放鼠标按钮，第一个选择器将停止匹配，第二个将停止匹配一旦给定元素不再聚焦（通过键盘或鼠标聚焦在文档中的其他位置）。
更新了演示，以允许切换label的文本（使用CSS生成的内容）：
#switch { display: none; } #switch + nav { height: 0; overflow: hidden; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; -webkit-transition: all 1s linear; transition: all 1s linear; } #switch:checked + nav { height: 4em; color: #000; background-color: #ffa; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; -webkit-transition: all 1s linear; transition: all 1s linear; } label { display: inline-block; cursor: pointer; } #switch ~ label::before { content: 'Show '; } #switch:checked ~ label::before { content: 'Hide '; }
JS小提琴演示 。
参考文献：
-
:checked（ 兼容性 ）。 -
:target（ 兼容性 ）。
试试:active psuedo-class。 它并非完全防弹，但您应该能够从中获得至少一些基本function。
在你的CSS代码中试试这样的东西……
selector:hover, selector:active { display:block; height:100px;//test width:200px; //test border:solid 1px #000; //test }