純css switch按鈕效果，懸浮提示
效果圖
反正也挺醜，做專案時發現的css用法，感覺挺有趣，百度百度，照著寫了一個
說明啥就不說了，自學
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<style>
#parent {
margin: auto;
margin-top: 50px;
background-color: white;
height: 500px;
width: 900px;
}
.lbl {
position: relative;
display: block;
width: 120px;
}
.lbl::before {
content: attr(data-lbl);
border: 1px solid gainsboro;
width: 80px;
overflow: hidden;
height: 25px;
border-radius: 10px;
display: inline-block;
border: 1px solid #c8c8c8;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition-property: text-indent;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: initial;
}
.lbl::after {
position: absolute;
content: 'III';
width: 33px;
line-height: 33px;
text-align: center;
border-radius: 100%;
position: absolute;
background-color: #FFF;
color: #AAA;
top: -4px;
z-index: 1;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, .3);
transition-property: left;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: initial;
}
input[type=checkbox].lbl-switch+.lbl[data-lbl]::before {
background-color: #FAFAFA;
text-indent: -50px;
}
input[type=checkbox].lbl-switch:checked+.lbl[data-lbl]::before {
background-color: #8ab2c9;
text-indent: 6px;
}
input[type=checkbox].lbl-switch+.lbl[data-lbl]::after {
left: -2px;
}
input[type=checkbox].lbl-switch:checked+.lbl[data-lbl]::after {
left: 50px;
}
</style>
<body>
<div id="parent">
<label title="吾之一生，離別已久，且隨疾風前行！">
<input type="checkbox" id="redio" class="lbl-switch" style="display: none;width: 300px;"/>
<label for="redio" class="lbl" data-lbl="開啟 關閉"></label>
</label>
<script>
$('#redio').change(function(){
if($(this).is(':checked')){
alert('開啟');
}else{
alert('關閉');
}
});
</script>
</div>
</body>
</html>