Функция отключения зависания при отключении кнопки

Question

Я создал набор кнопок разных размеров, цветов и эффектов, поэтому есть зеленые кнопки, красные кнопки, e.t.c Одна из них - синяя кнопка внизу. Поскольку вы можете видеть, что цвет фона изменяется на что-то более темное при наведении на мышь

Я хочу создать только один класс CSS, .button-disabled, который заставит кнопку выглядеть как отключенный. Я пытаюсь выяснить способ удаления эффекта зависания, когда кнопка отключена (например, вторая кнопка в примере ниже)

Обратите внимание, что я хочу, чтобы этот класс применялся на кнопках с разными цветами фона, поэтому я могу «т просто добавить что-то вроде этого:

.button-disabled:hover{ 
    background-color: /** Same as when not hovering **/ 
} 

.button{ 
 
    text-decoration: none; 
 
    border: none; 
 
    padding: 12px 20px; 
 
    cursor: pointer; 
 
    outline: 0; 
 
    display: inline-block; 
 
    margin-right: 2px; 
 
    color: #ffffff; 
 
    border-radius: 12px; 
 
} 
 

 
.button-blue{ 
 
    background-color: #3498db; 
 
} 
 

 
.button-blue:hover{ 
 
    background-color: #2980b9; 
 
} 
 

 
.button-blue:active{ 
 
    color: #3498db; 
 
    background-color: #ffffff; 
 
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.2); 
 
} 
 

 
.button-disabled{ 
 
    opacity: 0.6; 
 
}

<button class="button button-blue">Enabled Button</button> 
 
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

Answer 1

Вы можете использовать pointer-events: none, чтобы убедиться, что он ничего не делает. Это правильный путь, чтобы блокировать любые hover эффекты или даже нажмите происходит на элементе:

.button { 
 
    text-decoration: none; 
 
    border: none; 
 
    padding: 12px 20px; 
 
    cursor: pointer; 
 
    outline: 0; 
 
    display: inline-block; 
 
    margin-right: 2px; 
 
    color: #ffffff; 
 
    border-radius: 12px; 
 
} 
 
.button-blue { 
 
    background-color: #3498db; 
 
} 
 
.button-blue:hover { 
 
    background-color: #2980b9; 
 
} 
 
.button-blue:active { 
 
    color: #3498db; 
 
    background-color: #ffffff; 
 
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2); 
 
} 
 
.button-disabled { 
 
    opacity: 0.6; 
 
    pointer-events: none; 
 
}

<button class="button button-blue">Enabled Button</button> 
 
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

Так как это работает только для новых версий браузеров, всегда лучше использовать тот же цветов, добавление :hover состояния, а также:

.button { 
 
    text-decoration: none; 
 
    border: none; 
 
    padding: 12px 20px; 
 
    cursor: pointer; 
 
    outline: 0; 
 
    display: inline-block; 
 
    margin-right: 2px; 
 
    color: #ffffff; 
 
    border-radius: 12px; 
 
} 
 
.button-blue { 
 
    background-color: #3498db; 
 
} 
 
.button-blue:hover { 
 
    background-color: #2980b9; 
 
} 
 
.button-blue:active { 
 
    color: #3498db; 
 
    background-color: #ffffff; 
 
    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.2); 
 
} 
 
.button-blue.button-disabled:hover, 
 
.button-disabled { 
 
    opacity: 0.6; 
 
    background-color: #3498db; 
 
}

<button class="button button-blue">Enabled Button</button> 
 
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

Это станет болью, если у вас есть несколько классов, и вам необходимо переопределить класс disabled для каждого цвета.

Answer 2

использование не селектору

.button{ 
 
    text-decoration: none; 
 
    border: none; 
 
    padding: 12px 20px; 
 
    cursor: pointer; 
 
    outline: 0; 
 
    display: inline-block; 
 
    margin-right: 2px; 
 
    color: #ffffff; 
 
    border-radius: 12px; 
 
} 
 

 
.button-blue{ 
 
    background-color: #3498db; 
 
} 
 

 
.button-blue:not(.button-disabled):hover{ 
 
    background-color: #2980b9; 
 
} 
 

 
.button-blue:active{ 
 
    color: #3498db; 
 
    background-color: #ffffff; 
 
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.2); 
 
} 
 

 
.button-disabled{ 
 
    opacity: 0.6; 
 
}

<button class="button button-blue">Enabled Button</button> 
 
<button class="button button-blue button-disabled" disabled>Disabled Button</button>

Answer 3

Используйте не селектору вместе с селектором атрибута или селектор класса. Обратите внимание, что это не будет работать в IE8 и ниже.

.button{ 
 
    text-decoration: none; 
 
    border: none; 
 
    padding: 12px 20px; 
 
    cursor: pointer; 
 
    outline: 0; 
 
    display: inline-block; 
 
    margin-right: 2px; 
 
    color: #ffffff; 
 
    border-radius: 12px; 
 
} 
 

 
.button-blue{ 
 
    background-color: #3498db; 
 
} 
 

 
.button-blue:hover:not(.button-disabled){ 
 
    background-color: #2980b9; 
 
} 
 

 
.button-blue:hover:not([disabled]){ 
 
    background-color: #2980b9; 
 
} 
 

 
.button-blue:active{ 
 
    color: #3498db; 
 
    background-color: #ffffff; 
 
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.2); 
 
} 
 

 
.button-disabled{ 
 
    opacity: 0.6; 
 
}

<button class="button button-blue">Enabled Button</button> 
 
<button class="button button-blue button-disabled" disabled>Disabled Button</button>