我有一个自定义复选框.我想要的是在选中复选框时打开引导模式.我想要一个bootstrap模式打开就像点击一个按钮一样.希望你理解我的问题.我该怎么做.
/*
----------------------------------------------
CHECKBOX
----------------------------------------------
*/
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked)+label,
[type="checkbox"]:checked+label {
position: relative;
padding-left: 25px;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:checked+label:before {
content: '';
position: absolute;
left: 0;
top: 0px;
width: 20px;
height: 20px;
//border: 1px solid #aaa;
background: #09ad7e;
border-radius: 3px;
//box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
[type="checkbox"]:not(:checked)+label:before {
content: '';
position: absolute;
left: 0;
top: 0px;
width: 20px;
height: 20px;
//border: 1px …我有两个按钮:
1 - 跟随
2 - 取消关注
乍一看,将显示"关注"按钮,然后当您将鼠标悬停在"关注"按钮上时,我想让关注按钮消失并显示"取消关注"按钮,然后在"取消关注"按钮上方悬停一次后,我想要"关注"按钮出现和取消关注按钮消失,所以我该怎么做？
欢迎反馈.
<div class="btn-follow">Follow</div>
<div class="btn-unfollow">Unfollow</div>
.btn-follow {
color: #FFF;
background-color: #38B7EA;
padding: 5px 0;
width: 100px;
margin: 0 auto;
border-radius: 20px;
}
.btn-unfollow {
color: #FFF;
background-color: #A5BECB;
padding: 5px 0;
width: 100px;
margin: 0 auto;
border-radius: 20px;
}