Css, Safari: наведение не меняет цвет кнопки - PullRequest
Новая
       42

Css, Safari: наведение не меняет цвет кнопки

0 голосов
/ 10 апреля 2020

Это может быть глупая ошибка, но я не могу понять это. У меня есть <button> со стилем :hover, чтобы изменить его фон и цвет текста. Но в то время как фоновое изменение текста в Safari не меняется воспроизведите проблему:

https://codepen.io/gervaisb/pen/ExVaxqZ

Как видите, текст остается черным, когда мышь перемещается над кнопкой в ​​Safari.

Я не могу понять, в чем проблема; почему цвет кнопки никогда не меняется, в то время как фон меняется. Я также добавил border: 3px solid red к стилю :hover, и граница тоже работает.

Как сделать цвет текста кнопки белым (или любым другим), когда мышь над Safari (и другими) браузеры)?

1 Ответ

1 голос
/ 10 апреля 2020

Ваша проблема связана с all:unset, который странно ведет себя в Safari при установке свойства цвета. Вместо этого используйте -webkit-text-fill-color.

Просто добавьте -webkit-text-fill-color: white следующим образом: 

.item .popup button:hover,
.item .popup .button:hover,
.items .popup button:hover,
.items .popup .button:hover {
  background-color: blue;
  color: white;
  -webkit-text-fill-color: white;
}

См. Jsfiddle здесь: https://jsfiddle.net/2a6e8cb3/

...