CSS：如何将复选框样式设置成按钮，并添加 hover 效果？

Question

我已创建了一个小型按钮以代替复选框。我想知道是否有一种方法可以在 :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/

- trying_hal9000

---

#ck-button:hover { background: blue } 的例子 - Book Of Zeus

Answer 1

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

代码演示: http://jsfiddle.net/zAFND/4/

- Kelly Cook

Answer 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;
}

顺序很重要。

- Joseph Marikle

Answer 3

按照凯利所说去做...

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

例如：

<input type="checkbox" hidden> 

表现更出色，可以将其放置在页面上的任何位置。

- user3328769

---

啊...想想未来的用户，不要只考虑过去的用户 ;) - Maduro

谢谢您，我使用了Kelly的代码，并将复选框隐藏了。 - Ogglas

我认为在IE上会出现错误。 - chasmani

Answer 4

为了实现炫酷的 边框 和 字体 效果，请按照以下步骤进行操作：

#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/

- Jason Gennaro

---

嗯... 这很好，但海报并没有特别询问它。此外，CSS注释始终为/*...*/。 - Joseph Marikle

感谢@Joseph。是的，我知道OP没有要求这个...我在回答:hover问题并提供我的看法和一点额外的价值。至于评论，我意识到CSS注释是不同的。这仅适用于示例。但为了更加逼真，我还是进行了更改;-) - Jason Gennaro

我明白了。实际上，想想看，使用边框是一个不需要制作选中悬停状态的好方法 :P - Joseph Marikle

@Joseph：上次我揭发有人在CSS代码中使用//注释时，得到的回复是“//在Sass / SCSS中也是有效的注释语法”:P个人认为这种做法违反了标准方式(不针对你，Jason!)此外，SO的语法高亮器将CSS突出显示为CSS，而不是SCSS，最后我检查过//不是一个有效的注释分隔符。 - BoltClock

我同意@BoltClock的观点。我当时有些懒惰！这就是为什么我同意了Joseph的建议并进行了更改。 - Jason Gennaro

@BoltClock 对我来说只是强迫症而已 XD - Joseph Marikle