使用css来实现点击事件
2021-01-21 00:12
标签：set html absolute splay char int point round 操作 前段时间有人向我提过一个问题：“怎么使用css实现点击操作。” 我想了下倒也不是不可以，在解答了之后觉得有趣，刚好最近也准备写点博客什么的，便拿来做素材吧。 具体实现思路：在点击块上添加一个隐藏的单选input，然后在css里使用选择器判断当前选中块。做出显示或隐藏其他块。整体代码如下： 重点代码： 以上就是这次分享的全部内容了; 使用css来实现点击事件 标签：set html absolute splay char int point round 操作 原文地址：https://www.cnblogs.com/langui233/p/13304485.htmlDOCTYPE html>
html>
head>
meta charset="utf-8" />
title>title>
head>
body>
style>
section{
margin-top:100px;
margin-left: 100px;
}
.title{
font-size: 0;/* 清除盒模型之间的间隙 */
}
.box{
display: inline-block;
position: relative;
font-size: 18px;
left:0;
top:0;
color:#b1b1b1;
border-color: #b1b1b1;
margin-right: 10px;
border:1px solid #ccc;
border-bottom: 0;
line-height: 20px;
width:200px;
text-align: center;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.box>input{
position: absolute;
opacity: 0;/* 让ie什么的去死吧 */
width:100%;
left:0;
top:0;
height:100%;
z-index: 1;
}
.box>input:hover{
cursor:pointer;
}
.content{
display: none;
text-align: left;
color:#666;
position: absolute;
left:-1px;
top:56px;
border: 1px solid #ccc;
padding:10px;
width:414px;
box-sizing: border-box; /* 方便计算宽度 */
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
input[name=title]:checked+p{ /* 这里是重点 */
color:#53d9ef;
}
input[name=title]:checked+p+div{ /* 这里是重点 */
display: block;
}
.regression{ /* 毕竟是css,闹着玩的嘛 */
margin-left: -212px;
}
style>
section>
div class="title">
div class="box">
input type="radio" checked name="title" >
p>夏天的微风p>
div class="content">
p>夏天的风轻轻的吹过……p>
div>
div>
div class="box">
input type="radio" name="title" >
p>冬天的雪p>
div class="content regression" >
p>雪下的那么认真……p>
div>
div>
div>
section>
body>
html>
input[name=title]:checked+p{ /*选择器会玩就行~*
color:#53d9ef;
}
input[name=title]:checked+p+div{ /* 和上面一样 */
display: block;
}
第一篇文章，如写的不好请指出。
上一篇：base64.js
下一篇：js 获取url参数