[英]CSS3 Selector That Works like jQuery's .click()?
I've been using a pure CSS navigation for a few years now, and lately we've started building a bunch of mobile sites at the company I work for. 我使用纯CSS导航已有几年了,最近我们开始在我工作的公司中建立大量的移动网站。 I'd really like to keep using pure CSS, and note rely on jQuery, but on a mobile site, drop down menu's don't work correctly.
我真的很想继续使用纯CSS,并注意依赖jQuery,但是在移动网站上,下拉菜单无法正常工作。
Is there something similar to jQuery's .click();
是否有与jQuery的
.click();
类似的东西.click();
event in CSS3? CSS3中发生事件? Basically, when a user clicks on a navigation link, I want the drop down to open and stay open.
基本上,当用户单击导航链接时,我希望下拉列表保持打开状态。 I've tried looking around, but I can't seem to find anything.
我曾尝试环顾四周,但似乎找不到任何东西。
You could use the :target
selector for some basic functionality. 您可以使用
:target
选择器来实现一些基本功能。 See Chris Coyier's post about it . 请参阅Chris Coyier的相关文章 。 Note, brower support .
注意, 浏览器支持 。
Given some basic HTML structures, you can recreate the toggle (show/hide) capacities of JavaScript implementations: 给定一些基本的HTML结构,您可以重新创建JavaScript实现的切换(显示/隐藏)功能:
Using :target
: 使用
:target
:
HTML: 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: 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;
}
Using :checked
: 使用
:checked
:
HTML: HTML:
<input type="checkbox" id="switch" />
<nav>
<h2>This would be the 'navigation' element.</h2>
</nav>
<label for="switch">Toggle navigation</label>
CSS: 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;
}
Unfortunately the closest alternative native CSS has, to a ' :clicked
' selector is the :active
or :focus
pseudo-classes, the first selector of which will cease to match once the mouse-button is released, the second of which will cease to match once the given element is no longer focused (by either keyboard or mouse focusing elsewhere in the document). 不幸的是,最接近的替代天然CSS有,在“
:clicked
”选择器是:active
或:focus
伪类,一旦鼠标按钮被释放,其中将停止,以匹配所述第一选择器,其中第二个将停止一旦给定元素不再聚焦(通过键盘或鼠标聚焦在文档中的其他位置),则匹配。
Updated the demos, to allow for toggling the text of the label
(using CSS generated content): 更新了演示,以允许切换
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 ';
}
References: 参考文献:
:checked
( compatibility ). :checked
( 兼容性 )。 :target
( compatibility ). :target
( 兼容性 )。 Try the :active
psuedo-class. 尝试
:active
psuedo-class。 It's not completely bulletproof, but you should be able to get at least some basic functionality from it. 它不是完全防弹的,但是您应该至少能够从中获得一些基本功能。
Try something like this in your CSS Code... 在您的CSS代码中尝试类似的操作...
selector:hover, selector:active {
display:block;
height:100px;//test
width:200px; //test
border:solid 1px #000; //test
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.