我创建了一个小型按钮来显示而不是复选框。我想知道是否还有一种方法也有:悬停看起来不知何故?感谢
答案 0 :(得分:35)
#ck-button:hover {
background:red;
}
答案 1 :(得分:25)
看起来您需要一个与您选中的规则非常相似的规则
#ck-button input:hover + span {
background-color:#191;
color:#fff;
}
并用于悬停和点击状态:
#ck-button input:checked:hover + span {
background-color:#c11;
color:#fff;
}
但顺序很重要。
答案 2 :(得分:13)
做凯利说的......
BUT。不要将input
定位为绝对值{top -20px
(只是将其隐藏在页面之外),而是隐藏输入框。
示例:
<input type="checkbox" hidden>
效果更好,可以将它放在页面的任何位置。
答案 3 :(得分:4)
为冷却border
和font
效果执行此操作:
#ck-button:hover { /*ADD :hover */
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid red; /*change border color*/
overflow:auto;
float:left;
color:red; /*add font color*/
}