web-dev-qa-db-ja.com

CSS：ボタンのように見えるようにチェックボックスをスタイルしましたが、ホバーがありますか？

チェックボックスの代わりに表示する小さな見た目のボタンを作成しました。ホバーを何とか見せる方法があるのだろうかと思っていましたか？ありがとう

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

csshovercss-selectors
35
trying_hal9000
#ck-button:hover {
    background:red;
}

フィドル： http://jsfiddle.net/zAFND/4/

35
Kelly Cook

チェックしたルールに非常によく似たルールが必要なようです

http://jsfiddle.net/VWBN4/

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

ホバーおよびクリック状態の場合：

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

ただし、順序は重要です。

25
Joseph Marikle

ケリーが言ったことをやる...

しかし。 inputを絶対位置に配置し、_-20px（ページから非表示にする）、入力ボックスを非表示にします。

例：

<input type="checkbox" hidden>

うまく機能し、ページのどこにでも配置できます。

14
user3328769

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

4
Jason Gennaro