css - Css,Safari:悬停不会改变按钮颜色
问题描述
这可能是一个愚蠢的错误,但我无法理解。我有<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(和其他浏览器)上时,如何使按钮文本颜色为白色(或任何颜色)?
解决方案
您的问题来自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/
推荐阅读
- spring-boot - 无法连接到本地运行在 Docker 上的 Spring Boot 应用程序
- kubernetes - 为什么 Kubelet 会在挂载过程中说文件存在,而实际上却不存在?
- c - 有没有办法检测指针是否已在 C 中初始化?
- laravel - 得到错误 POST 方法
- python - 将.py文件作为模块导入时没有显示文档字符串?
- java - 如何将类数据类型作为参数传递并将其用于强制转换
- git - 如何根据文件类型过滤 git diff?
- javascript - 如何返回firebase db的快照值?- javascript
- python - 从文件路径中删除目录
- javascript - 取消lodash的去抖动,不调用函数