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

クール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/

Answer 4

ケリーが言ったことですか...

をBUT。 inputをアブソリュートに配置し、-20px（ページを隠す）の代わりに、入力ボックスを非表示にします。

例：

<input type="checkbox" hidden> 

がうまく動作し、ページ上の任意の場所に置くことができます。