Наведіть курсор і активно лише тоді, коли його не вимкнено

186

Я використовую наведення курсора , активного та відключеного для стилювання кнопок.

Але проблема полягає у відключенні кнопки наведення курсора, а активні стилі все ще застосовуються.

Як застосувати наведення та активацію лише на увімкнені кнопки?

css

— Алі
джерело

329

Ви можете використовувати : увімкнений псевдоклас, але повідомлення IE<9не підтримує його :

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}

— Інженер
джерело

3

Є також :not()селектор, але знову ж таки, він підтримується лише з IE9. Дивіться: developer.mozilla.org/en-US/docs/Web/CSS/:not

— jnns

button:hover:enabledв моєму випадку, здавалося, не працює. Використання IE9 емуляції під IE11.

— Неоліск

75

.button:active:hover:not([disabled]) {
    /*your styles*/
}

Ви можете спробувати це ..

— Velayutham Anjamani
джерело

Це хороше рішення, коли ви хочете, щоб стан "відключений курсор" виглядав ідентичним статусу "відключений".

— Міхаель Лоо

Я <3 це рішення. дозволяє мені мати таке: <button class = "button"> наведенні </button> і <button class = "кнопка no-hover> не наводить </button> просто за допомогою: not (.no-hover)

— Бен

35

Чому б не використовувати атрибут "disabled" у css. Це повинно працювати у всіх браузерах.

button[disabled]:hover {
    background: red;
}
button:hover {
    background: lime;
}

— Мадеф
джерело

13

Покрийте всі відключені стани, вибравши їх усі в одному рядку:.button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}

— DBK

13

Підхід із нижчою специфічністю, який працює в більшості сучасних браузерів (IE11 + та виключає деякі мобільні браузери Opera & IE - http://caniuse.com/#feat=pointer-events ):

.btn {
  /* base styles */
}

.btn[disabled]
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.btn:hover {
  color: red;
}

pointer-events: noneПравило відключить ширяння; вам не потрібно буде підвищувати специфіку за допомогою .btn[disabled]:hoverселектора, щоб скасувати стиль наведення курсора.

(FYI, це простий HTML-покажчик події, а не суперечливі вказівники подій абстрагування-введення пристроїв)

— Міхай
джерело

12

У sass (scss):

 button {
  color: white;
  cursor: pointer;
  border-radius: 4px;

  &:disabled{
    opacity: 0.4;

    &:hover{
      opacity: 0.4;  //this is what you want
    }
  }

  &:hover{
    opacity: 0.9;
  }
}

— jakeforaker
джерело

10

Якщо ви використовуєте LESSабо Sass, Ви можете спробувати це:

.btn {
  &[disabled] {
    opacity: 0.6;
  }
  &:hover, &:active {
    &:not([disabled]) {
      background-color: darken($orange, 15);
    }
  }
}

— жировий код коду
джерело

Це хороше рішення в SASS, оскільки ефект наведення буде оброблений для відключеної кнопки, якщо ви не загорнете її в не блоковану.

— mbokil

2

Одним із способів є додавання часткового класу при відключенні кнопок та перестановці курсора та активних станів цього класу в css. Або видалення класу при відключенні та вказівці властивостей наведення та активного псевдо цього класу лише в css. Так чи інакше, це, ймовірно, не можна зробити просто з допомогою css, вам потрібно буде використовувати трохи js.

— технофобар
джерело