Css，Safari：悬停不会更改按钮颜色

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>

编辑2：为了取悦@Rob（他可能拒绝了我的问题），我创建了一个Codepen来重现该问题：

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

您可以看到，使用Safari将鼠标移到按钮上时，文本仍为黑色。

我不明白是什么问题；为什么按钮颜色从不改变而背景却没有改变。我还在border: 3px solid red样式上添加了:hover，边框也适用。

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

Answer 1

您的问题来自all:unset，在设置color属性时，它在Safari上表现异常。 Safari改用-webkit-text-fill-color。

只需将color:white替换为-webkit-text-fill-color: white，如下：

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

在此处查看jsfiddle：https://jsfiddle.net/uaqdocb6/