这可能是一个愚蠢的错误,但我无法弄清楚。我有一个<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将鼠标移到按钮上时,文本仍为黑色。
我不明白这是什么问题;为什么按钮颜色从不改变而背景却没有改变。我还在border: 3px solid red
样式上添加了:hover
,边框也可以使用。
当Safari(和其他浏览器)将鼠标移到上方时,如何使按钮文本变为白色(或任何颜色)?
答案 0 :(得分: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/