Кнопки меню меняют тени при нажатии React / CSS - PullRequest
Новая
       11

Кнопки меню меняют тени при нажатии React / CSS

0 голосов
/ 26 февраля 2019

Я пытаюсь добиться этого с помощью CSS, я использую «Reaction-Horizontal-Scrolling-Menu», и, как я стилизую элементы меню, .menu-item: hover &. menu-item:active работает хорошо, но .menu-item: visitisnt, я пробовал несколько способов, но я не могу контролировать элемент меню после щелчка по нему, вот фрагмент кода, установленный на текущий просмотр модуля

https://codesandbox.io/s/qk1v5n0z5w?fontsize=14&moduleview=1

1 Ответ

0 голосов
/ 26 февраля 2019

Я обнаружил, что кнопки box-shadow меняются всякий раз, когда пользователи нажимают: 

.menu-item:active {
  background: #fafafa;
  transition: all 0.1s ease-out;
  border: 9px solid #fafafa;
  box-shadow: 0 7px 30px #cc0f0fa6;
  color: #cc0f0f4d;
}

, но для .menu-item: посещения нет CSS.Причина в том, что ваши кнопки не являются ссылками (они <div>). Браузеры ограничивают стили, которые можно установить для a:visited ссылок, из-за проблем безопасности.

Допустимые стили:

  • цвет
  • цвет фона
  • цвет границы (и цвет границы для отдельных сторон)
  • цвет контура
  • цвет столбца-правила
  • цветные части заливки и обводки

Все остальные стили наследуются от: link.

...