滑下div点击纯CSS？
滑下div点击纯CSS？
提问于 2012-11-16 07:16:09
我找到了这个帖子如何在点击时创建滑动DIV？
但是所有的答案都是Jquery方法。有什么方法可以用纯CSS来创建吗？我还有另外几件事.
- 当滚动时，我可以添加什么来使幻灯片保持不变？
- 将触发动画的链接更改为“关闭”，以使div幻灯片返回。
下面链接到post// http://shutterbugtheme.tumblr.com/中的示例
我也尝试过搜索，但唯一的结果是jquery方法..。
回答 7
Stack Overflow用户
发布于 2012-11-16 22:42:57
这是可以做到的，尽管这是个小问题。保留状态的两个元素(在CSS中称为:复选)是复选框和单选按钮元素。因此，如果通过使用for属性并添加div将复选框与标签关联起来，则可以通过读取(隐藏)按钮的状态来获得结果：
<div class=window>
<input type=checkbox class=toggle id=punch>
<label for=punch>Punch It, Chewie<label>
<div><p>Here’s my content. Beep Boop Blurp.</p></div>
</div>和CSS：
input.toggle { display: none; }
input.toggle ~ div { height: 0px; margin: .2rem; overflow: hidden; }
input.toggle:checked ~ div { height: 180px; }包括动画打开/关闭效果的进一步解释和示例。
Stack Overflow用户
发布于 2012-11-16 07:35:13
这在纯CSS中是不可能识别的点击。您可以使用:悬浮和转换来完成它，但是如果没有javascript，这是非常接近的。
.hover
{
cursor: pointer;
position: relative;
z-index: 1;
}
.slide
{
position: absolute;
top: 0;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
}
.hover:hover + .slide
{
top: 50px;
}/MaMu9/1/
但是要注意，转换是CSS3，在IE<9和更好的浏览器的旧版本中不能工作。
编辑:在使用CSS中的:focus属性发布了另一个答案之后:可以使用一个警告:您必须单击使其向下滑动的元素的外部，以使其滑动，否则它可以正常工作。
请注意，元素必须有tabindex='1‘(或根据元素在文档中的位置而有意义的任何数字)才能工作。
.hover:focus + .slide
{
top: 50px;
-webkit-transition: top 1s;
}Sevenoaks/MaMu9/1/
Stack Overflow用户
发布于 2012-11-16 08:09:56
您可以识别元素上的“焦点”事件，并使用CSS转换对其进行操作。
下面是一个示例，当单击div50px时，它将向下移动
标记
<div tabindex='1' id='box'></div>CSS
#box {
background-color:#3a6d90;
width:100px; height:100px;
transition: margin-top 2s;
-moz-transition: margin-top 2s; /* Firefox 4 */
-webkit-transition: margin-top 2s; /* Safari and Chrome */
-o-transition: margin-top 2s; /* Opera */
}
#box:focus {
margin-top:50px;
outline:0;
}工作示例：http://jsfiddle.net/NBHeJ/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13412054
复制相关文章
相似问题
腾讯云开发者
