Css，Safari :hover 不会改变按钮颜色

Question

这可能是一个愚蠢的错误，但我无法理解。我有 <button> 和 :hover 样式来改变他的背景和文字颜色。但是当背景改变时，文本在 Safari 上永远不会改变。

.item .popup .buttons,
.items .popup .buttons {
  all: unset; /* I have a hughe CSS inherited with unrequired styles */
  display: block;
  text-align: right;
  padding: 12px;
}
.item .popup .buttons button,
.item .popup .buttons .button,
.items .popup .buttons button,
.items .popup .buttons .button {
  margin-left: 6px;
} 

.item .popup button,
.item .popup .button,
.items .popup button,
.items .popup .button {
  display: inline-block;
  font-size: 16px;
  line-height: 22px;
  padding: 3px 6px;

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

编辑这里是需要的Html.

<section class="items">
  <div class="popup-overlay" ></div>
    <div class="popup">
        <h1 class="title" translate>A title</h1>
        <p class="content" translate>
            A bit of text
        </p>
        <div class="buttons">
            <button class="button" translate ng-click="onDeviceVerified(true)">
                Ok
            </button>
            <button class="button warning" translate ng-click="onDeviceVerified(false)">
                Cancel
            </button>
        </div>
    </div>
</section>

我创建了一个代码笔来重现这个问题：

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

如您所见，当鼠标移到 Safari 的按钮上时，文本仍然是黑色的。

我不明白这是什么问题；为什么按钮颜色永远不会改变而背景会改变。我还在 :hover 样式上添加了一个 border: 3px solid red 并且边框也有效。

当鼠标悬停在 Safari（和其他浏览器）上时，如何使按钮文本颜色为白色（或任何颜色）？

Answer 1

您的问题来自 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/

Css，Safari :hover 不会改变按钮颜色

Css, Safari :hover won't change button color

css

safari

colors

button

hover