Hover и Active только когда не отключен

187

Я использую hover , active и disabled для стиля кнопок.

Но проблема в том, что когда кнопка отключена, наведение и активные стили по-прежнему применяются.

Как применить наведение и активную только на включенные кнопки?

css

— Али
источник

329

Вы можете использовать псевдокласс : enabled , но в уведомлении 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.

— Neolisk

76

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

Вы можете попробовать это ..

— Велаятхам анжамани
источник

Это хорошее решение, когда вы хотите, чтобы состояние «зависание отключено» было идентично состоянию «не зависание отключено».

— Михаэль Лоо

Я <3 это решение. позволяет мне иметь следующее: <button class = "button"> hovers </ button> и <button class = "button no-hover> не зависает </ button>, просто используя: not (.no-hover)

— Бен

35

Почему бы не использовать атрибут «отключен» в CSS. Это должно работать во всех браузерах.

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

— Madef
источник

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селектора, чтобы свести на нет стиль наведения.

(К вашему сведению, это простые события указателя 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);
    }
  }
}

— fatlinesofcode
источник

Это хорошее решение в SASS, так как эффект наведения будет обрабатываться для отключенной кнопки, если вы не поместите ее в неблокированную кнопку.

— Мбокил

2

Одним из способов является добавление неполного класса при отключении кнопок и переопределении состояний наведения и активного состояния для этого класса в css. Или удаление класса при отключении и указании hover и активных псевдо-свойств для этого класса только в css. В любом случае, это, скорее всего, не может быть сделано чисто с помощью css, вам нужно использовать немного js.

— techfoobar
источник