CSS：将复选框设置为看起来像按钮，是否有悬停？答案

【问题标题】：CSS: styled a checkbox to look like a button, is there a hover?CSS：将复选框设置为看起来像按钮，是否有悬停？
【发布时间】：2011-11-30 08:00:21
【问题描述】：

我创建了一个看起来很小的按钮来显示而不是复选框。我想知道是否有办法以某种方式也有一个 :hover 外观？谢谢

http://jsfiddle.net/zAFND/2/

【问题讨论】：

#ck-button:hover { background: blue } 例如

标签： css hover css-selectors

【解决方案1】：

#ck-button:hover {
    background:red;
}

小提琴：http://jsfiddle.net/zAFND/4/

【讨论】：

【解决方案2】：

看起来您需要一个与您检查的规则非常相似的规则

http://jsfiddle.net/VWBN4/3

#ck-button input:hover + span {
    background-color:#191;
    color:#fff;
}

对于悬停和点击状态：

#ck-button input:checked:hover + span {
    background-color:#c11;
    color:#fff;
}

顺序很重要。

【讨论】：

【解决方案3】：

这样做以获得很酷的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*/
}

示例： http://jsfiddle.net/zAFND/6/

【讨论】：

嗯...这很整洁，但发帖人并没有具体询问。此外，css cmets 始终为 /*...*/。
谢谢@Joseph。是的。我知道 OP 并没有要求它......我正在回答 :hover Q 并给我一点额外的价值。至于 cmets，是的，我意识到 css cmets 是不同的。它仅用于示例。但无论如何都为了现实而改变了;-)
我明白了。实际上想一想，使用边框是不必进行检查悬停状态的好方法：P
@Joseph：上次我对某人在 CSS 代码中使用 // cmets 表示不满，我回复说“// 在 Sass/SCSS 中也是有效的注释语法”：P 就我个人而言，我只是将其称为懒惰以标准方式做事（不是你，杰森！）。另外，SO 的语法高亮器将 CSS 突出显示为 CSS，而不是 SCSS，最后我检查了 // 不是有效的注释分隔符。
我同意@BoltClock。我在那里偷懒了！这就是我同意约瑟夫并做出改变的原因。

【解决方案4】：

照凯利说的做……

但是。不要将input 定位为绝对位置，将-20px 置于顶部（只是将其隐藏在页面之外），而是隐藏输入框。

示例：

<input type="checkbox" hidden>

效果更好，可以放在页面的任何位置。

【讨论】：

啊...想想未来的用户；）不是通行证..；）
感谢您，使用了隐藏复选框的 Kellys 代码。
我认为 IE 会中断