像jQuery的.click（）一样工作的CSS3选择器？

Question

我使用纯CSS导航已有几年了，最近我们开始在我工作的公司中建立大量的移动网站。 我真的很想继续使用纯CSS，并注意依赖jQuery，但是在移动网站上，下拉菜单无法正常工作。

是否有与jQuery的.click();类似的东西.click(); CSS3中发生事件？ 基本上，当用户单击导航链接时，我希望下拉列表保持打开状态。 我曾尝试环顾四周，但似乎找不到任何东西。

Answer 1

您可以使用:target选择器来实现一些基本功能。 请参阅Chris Coyier的相关文章 。 注意， 浏览器支持 。

编辑：快速演示

Answer 2

给定一些基本的HTML结构，您可以重新创建JavaScript实现的切换（显示/隐藏）功能：

使用:target ：

HTML：

<nav id="nav">
    <h2>This would be the 'navigation' element.</h2>
</nav>
<a href="#nav">show navigation</a>
<a href="#">hide navigation</a>

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：

<input type="checkbox" id="switch" />
<nav>
    <h2>This would be the 'navigation' element.</h2>
</nav>
<label for="switch">Toggle navigation</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 {
    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 （ 兼容性 ）。

Answer 3

尝试:active psuedo-class。 它不是完全防弹的，但是您应该至少能够从中获得一些基本功能。

Answer 4

在您的CSS代码中尝试类似的操作...

  selector:hover, selector:active {
     display:block;
     height:100px;//test
     width:200px; //test
     border:solid 1px #000; //test
    }