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>

我創建了一個 codepen 來重現該問題：

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

如您所見，當鼠標移到帶有 Safari 的按鈕上時，文本仍然是黑色的。

我不明白是什么問題； 為什么按鈕顏色從不改變而背景改變。 我還在:hover樣式上添加了一個border: 3px solid red ，邊框也可以使用。

當鼠標懸停在 Safari（和其他瀏覽器）上時，如何使按鈕文本顏色為白色（或任何顏色）？

Answer 1

您的問題來自all:unset ，在設置 color 屬性時，它在 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/