CSS:设置一个复选框,看起来像一个按钮,是否有悬停？

Question

我创建了一个小型按钮来显示而不是复选框.我想知道是否还有一种方法也有:悬停看起来不知何故？谢谢

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

Answer 1

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

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

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

顺序很重要.

Answer 3

做凯利说的......

但.不要将input定位的绝对和顶部-20px(只是将其隐藏在页面之外),而是隐藏输入框.

例:

<input type="checkbox" hidden> 

效果更好,可以将它放在页面的任何位置.

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

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