[英]Css, Safari :hover won't change button color
It may be a dumb mistake but I cannot figure it.这可能是一个愚蠢的错误,但我无法理解。 I have
<button>
with a :hover
style to change his background and text colour.我的
<button>
带有:hover
样式来更改他的背景和文本颜色。 But while the background change the text never change on Safari.但是当背景改变时,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;
}
Edit Here is the required Html.编辑这里是所需的 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>
I created a codepen to reproduce the issue:我创建了一个 codepen 来重现该问题:
https://codepen.io/gervaisb/pen/ExVaxqZ https://codepen.io/gervaisb/pen/ExVaxqZ
As you can see the text is still black when the mouse move over a button withing Safari.如您所见,当鼠标移到带有 Safari 的按钮上时,文本仍然是黑色的。
I cannot understand what is the issue;我不明白是什么问题; why the button color never change while the background does.
为什么按钮颜色从不改变而背景改变。 I have also added a
border: 3px solid red
on the :hover
style and the border works too.我还在
:hover
样式上添加了一个border: 3px solid red
,边框也可以使用。
How can I make the button text color white (or any colour) when the mouse is over with Safari (and other browsers)?当鼠标悬停在 Safari(和其他浏览器)上时,如何使按钮文本颜色为白色(或任何颜色)?
Your problem comes from all:unset
, which behaves weirdly on Safari when setting the color property.您的问题来自
all:unset
,在设置 color 属性时,它在 Safari 上的行为很奇怪。 Use -webkit-text-fill-color
instead.请改用
-webkit-text-fill-color
。
Just add -webkit-text-fill-color: white
as follows:只需添加
-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;
}
See jsfiddle here: https://jsfiddle.net/2a6e8cb3/在此处查看 jsfiddle: https://jsfiddle.net/2a6e8cb3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.