CSS：将复选框样式设置为按钮，是否有悬停？

我创建了一个外观很小的按钮来显示，而不是复选框。我想知道是否有一种方法也有一个：悬停看看不知怎的？谢谢

---

Fiddle:

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

对于悬停和单击状态：

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

---

不过，顺序很重要。

这样做可以获得一个很酷的

边框

和

字体

效果：

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

示例：

照凯利说的做

但是。将输入框隐藏，而不是将

输入置于绝对位置，并置于顶部
-20px
（只是将其隐藏在页面之外）

例如：

<input type="checkbox" hidden> 



效果更好，可以放在页面的任何位置。
#确认按钮：悬停{background:blue}例如。。。这很好，但海报上没有具体询问。另外，css注释总是
/*…*/
。谢谢@Joseph。对我知道OP没有要求它。。。我回答了
：hover
Q，并给了我一点额外的价值。至于评论，是的，我意识到css评论是不同的。这只是一个例子。但无论如何都改变了现实主义；-）我懂了。实际上，想想看，使用边界是一种不必进行选中悬停状态的好方法：P@Joseph：上次我告发某人在CSS代码中使用了
/
注释时，我得到了回复“
/
在Sass/SCSS中也是有效的注释语法”：P我个人认为用标准方式做事是懒惰的（不是你，Jason！）另外，SO的语法高亮显示CSS为CSS，而不是SCS，最后我检查的
/
不是有效的注释分隔符。我同意@BoltClock。我在那里很懒！这就是为什么我同意w/Joseph并做了更改。啊……想想未来的用户；）不是通行证；）谢谢你，使用了Kellys代码，隐藏了复选框。我想这会破坏IE
#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*/
}

<input type="checkbox" hidden>