我创建了一个看起来很小的按钮来显示而不是复选框。我想知道是否有办法以某种方式也有 :hover 外观?
HTML:
<div id="ck-button">
<label>
<input type="checkbox" value="1"><span>red</span>
</label>
</div>
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;
}
Fiddle: http://jsfiddle.net/zAFND/2/
#ck-button:hover {
background:red;
}
Fiddle: http://jsfiddle.net/zAFND/4/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)