CSS：将复选框的样式设置为看起来像按钮，是否有悬停？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7642277/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: styled a checkbox to look like a button, is there a hover?
提问by trying_hal9000
I've created a small looking button to display instead of a checkbox. I was wondering if there was a way to also have a :hover look somehow? thanks
我创建了一个看起来很小的按钮来显示而不是复选框。我想知道是否有办法以某种方式也有 :hover 外观？谢谢
回答by Kelly Cook
#ck-button:hover {
background:red;
}
Fiddle: http://jsfiddle.net/zAFND/4/
回答by Joseph Marikle
it looks like you need a rule very similar to your checked rule
看起来您需要一个与检查规则非常相似的规则
#ck-button input:hover + span {
background-color:#191;
color:#fff;
}
and for hover and clicked state:
对于悬停和点击状态：
#ck-button input:checked:hover + span {
background-color:#c11;
color:#fff;
}
the order is important though.
不过顺序很重要。
回答by user3328769
Do what Kelly said...
照凯莉说的去做……
BUT. Instead of having the inputpositioned absolute and top -20px(just hiding it off the page), make the input box hidden.
但。而不是input定位绝对和顶部-20px（只是将其隐藏在页面之外），而是隐藏输入框。
example:
例子：
<input type="checkbox" hidden>
Works better and can put it anywhere on the page.
效果更好，可以将其放在页面上的任何位置。
回答by Jason Gennaro
Do this for a cool borderand fonteffect:
这样做对一个凉爽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*/
}
Example:http://jsfiddle.net/zAFND/6/
