使用CSS3 中的checked没有实现效果,求解大神-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

使用CSS3 中的checked没有实现效果,求解大神

杨冬芳 2016-06-07 14:49:40 1329
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.a{ width:600px;
    height:600px;
    background-color:rgba(0,51,153,.3); 
    position:relative;
    margin:0 auto;
    }
.a input{ display:none;}

.a label{ display:block; 
          width:100px; 
          height:20px; 
          background:#0F0; 
          float:left; 
          margin-left:16px; 
          }
.one1,.one2,.one3,.one4,.one5{ 
      width:500px; 
      height:550px; 
      position:absolute; left:20px; top:25px;
      opacity:0;
      }              

.one1{ background:#000;}
.one2{ background:#F00;}
.one3{ background:#FF0;}
.one4{ background:#00F;}

.a input.in1:checked ~ one .one1,
.a input.in2:checked ~ one .one2, 
.a input.in3:checked ~ one .one3, 
.a input.in4:checked ~ one .one4{ opacity:1; transition:all 0.2s linear  0.1s;  }




</style>


</head>

<body>
<div class="a">

<input type="radio" name="in1" class="in1" id="in1"/>
<label for="in1">abc</label>

<input type="radio" name="in1" class="in2" id="in2"/>
<label for="in2">abc</label>

<input type="radio" name="in1" class="in3" id="in3"/>
<label for="in3">abc</label>

<input type="radio" name="in1" class="in4" id="in4"/>
<label for="in4">abc</label>

<input type="radio" name="in1" class="in5" id="in5"/>
<label for="in5">abc</label>

<div class="one">
<div class="one1"></div>
<div class="one2"></div>
<div class="one3"></div>
<div class="one4"></div>
</div>

</div>
</body>
</html>
分享到
取消 提交回答
全部回答(2)
  • 半指温柔乐
    2019-07-17 19:30:11

    类样式前面必须加点

    0 0
  • 杨冬芳
    2019-07-17 19:30:11

    原来的代码:

    .a input.in1:checked ~ one .one1,
    .a input.in2:checked ~ one .one2, 
    .a input.in3:checked ~ one .one3, 
    .a input.in4:checked ~ one .one4{ opacity:1; transition:all 0.2s linear  0.1s;  }
    

    解答:你写的one前面少了一个.,因为那个是类名

    0 0
添加回答
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章