將複選框樣式設定為具有懸停效果的按鈕
建立自訂樣式的 UI 元素可以增強使用者體驗。在本例中，您希望將複選框替換為類似按鈕的外觀，此外，您希望實現懸停效果以改善互動。
HTML 結構：
<code class="html"><div id="ck-button">
<label>
<input type="checkbox" value="1"><span>red</span>
</label>
</div></code>CSS 樣式：
要將複選框樣式設為按鈕並實作框樣式懸停效果，您可以使用以下CSS：
<code class="css">div label input {
margin-right:100px;
}
body {
font-family:sans-serif;
}
#ck-button {
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
#ck-button label {
float:left;
width:4.0em;
}
#ck-button label span {
text-align:center;
padding:3px 0px;
display:block;
}
#ck-button label input {
position:absolute;
top:-20px;
}
#ck-button input:checked + span {
background-color:#911;
color:#fff;
}
#ck-button:hover {
background:red;
}</code>懸停樣式：
添加懸停效果的關鍵是以下CSS：
<code class="css">#ck-button:hover {
background:red;
}</code>這指定當使用者將滑鼠懸停在按鈕樣式的複選框上時，背景將變為紅色。
即時範例：
請參考以下小提琴中的即時範例：
http://jsfiddle.淨/zAFND/4/
以上是如何將複選框設定為看起來像具有懸停效果的按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
