本文探讨了一个CSS和JavaScript交互的例子，其中`input[type='radio']`与`span`元素的透明度变化使得按钮状态在点击时可见或不可见。关键在于`position:absolute`和`opacity:0`属性的使用，以及`:checked`伪类来控制元素的显示状态。这对于理解和实践网页动态效果的实现具有重要意义。
body{background: gray;}
#con{
height: 50px;
width: 230px;
padding: 20px;
margin: 50px auto;
}
#con .man{
width: 50px;
height: 50px;
float: left;
border-radius: 100%;
background:orange;
position: relative;
margin-left: 20px;
}
#con input{
position: absolute;/*去掉这个的话，按钮就失灵了，这是为什么呢？？*/
opacity: 0;
width: 100%;
height: 100%;
z-index:100;
}
#con .wom{
width: 50px;
height: 50px;
float: left;
margin-left: 30px;
border-radius: 100%;
background: orange;
position: relative;
}
#con label{
display: block;
float: left;
font-size: 24px;
font-weight: bold;
font-family: 微软雅黑;
margin-left: 10px;
margin-top: 10px;
}
#con span{
width: 25px;
height: 25px;
display: block;
position: absolute;
top:10px;
left: 10px;
background: yellow;
border-radius: 100%;
}
input[type="radio"]+span{
opacity: 0;
}
input[type="radio"]:checked+span{
opacity: 1;
}
男
女
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
