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

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

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

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

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

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

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

Answer 3

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

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

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

---

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