demo-2-选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--<link rel="stylesheet" type="text/css" href="../css/xuanzeqi.css">-->
        <style>
            *{
    margin:0;
    padding:0;
}
.big div{
    width:300px;
    height:300px;
    border-radius:50%;
    background:gray;
    float:left;
}
.big input{
    position:absolute;
    top:-9999px;
}
input:checked +div{
    background:red;
}
a{
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none; 
}

        </style>
    </head>
    <body>
        <div class="big">
        <label>
            <input type="radio" name="www"/>
            <div class="m1"><a href="#">fds</a></div>
        </label>
        <label>
            <input type="radio" name="www"/>
            <div class="m2"><a href="#">fds</a></div>
        </label>
        <label>
            <input type="radio" name="www"/> <!--//name 必须相同 不用name值都可以选中，name相同时只能选中一个-->
            <div class="m3"></div>
        </label>
        </div>
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容