                        课程
                    
                        /前端开发
                        
                            /CSS3
                        
                        /css3实现网页平滑过渡效果

如何用CSS3实现单选框的选定取消及切换

选中input实现使input 下的a链接到相应页面

慕粉3194808

2016-09-08

源自：css3实现网页平滑过渡效果 1-5

关注问题我要回答

2229

操作

收起

2 回答

慕移动9181930
2022-03-25

可以嵌套?只要不交叉随便用2 个 b o r d e r 也应该是 2 p x 吧，就是 m a r g i n -l e f t :7 9 0 p x 。看了您的回答我才知道 b o r d e r 也是计算在宽度内的。

0 回复有任何疑惑可以回复我~

收起回答

乄小安静
2016-09-09

input,a{
   position:fixed;
   width:100px;
   height:50px;
   line-height:50px;
}
input{
   opacity:0;
   z-index:100;
}
a{
   background-color:blue;
   font-size:16px;
   color:#fff;
   font-weight:bold;
   text-decoration:none;
   text-align:center;
   z-index:10;
}
.a2,.a2+a{
   left:100px;
}

input:checked+a{
   background-color:red;
}

</style>
</head>
<body>
<input type="radio" name="radio-set" checked="checked" class="a1">
<a href="#">页面1</a>
<input type="radio" name="radio-set" class="a2">
<a href="#">页面2</a>