CSS: установил флажок, чтобы он выглядел как кнопка, есть ли указатель мыши?

Question

Я создал маленькую кнопку для отображения вместо флажка. Мне было интересно, есть ли способ также как-то выглядеть: hover? спасибо

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/