Отключать тень только при наведении на отключенную кнопку

Question

Я создаю кнопки, используя Генератор кнопок Bootstrap . Это беглые кнопки дизайна, и я заметил, что когда :disabled кнопка все еще отбрасывает тень на :hover.

Мои вопросы:

1. Как мне остановить тень, когда кнопка отключена?
2. Это нормально делать это? Это кажется хорошим выбором для меня, но документировано ли это для кнопок Fluent Design?

Я пытался:

.btn.disabled:hover { box-shadow: none; }

но это не работает.

Answer 1

Это должно сработать, вы просто забыли использовать двоеточие : для :disabled вместо точки ., что означает псевдокласс CSS.

.btn:disabled:hover{
    box-shadow: none;
}

Answer 2

Как уже упоминалось в комментарии @Pete, чтобы ваш код работал, вам нужно использовать специальный селектор состояний CSS, :disabled вместо .disabled класса.

.btn:disabled { box-shadow: none; }

Обращаясь ко второму вопросу, это специфично для Fluent Design? Я не верю, что это так - вы не найдете каких-либо простых руководящих принципов для работы с Fluent Design на данный момент (июль 2018 года), только некоторая общая идея .

---

На стороне мы добавим тот же стиль в саму библиотеку Fluent Kit, так как это надзор с нашей стороны, поэтому в следующих выпусках вы не увидите тени на упомянутых отключенных Кнопках начальной загрузки .

Answer 3

Добавить pointer-events:none свойство для кнопки отключения CSS.

Так как по умолчанию курсор надписи написан так, мы должны добавить пользовательский CSS, подобный этому.

.btn:disabled{
    pointer-events: none;
}

/*****************OR***************************/

.btn:disabled {
    box-shadow: none !important;
}