由于某种原因，悬停在我的 firefox 字体标签中不起作用，它在 chrome 上正常工作，但在 firefox 中不起作用。如果我尝试将鼠标悬停在另一个标签(例如按钮和 div)上，它就会按预期工作。我使用的是 Firefox 64.0
这是 codepen 中的示例:https://codepen.io/luansergiomattos/pen/MZoMPX
<body>
<div class="header__account">
<button class="header__font">
<font class="header__font">LOGIN</font>
</button>
<button>
<font class="header__font">REGISTER</font>
</button>
</div>
</body>
CSS
.header__font:hover {
animation: 0.5s ease-out 0s 1 forwards highlight;
}
.header__font::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -7px;
background: red;
visibility: hidden;
border-radius: 5px;
transform: scaleX(0);
transition: 0.25s linear;
}
.header__font:hover::before {
visibility: visible;
transform: scaleX(1);
}
.header__font:focus::before {
visibility: visible;
transform: scaleX(1);
}
}
抱歉如果我的代码中有很多东西，我只是从我正在工作的元素中复制
我该如何解决这个问题？
最佳答案
这可能对你有帮助...
div.header__font:hover {
animation: 0.5s ease-out 0s forwards highlight;
}
关于html - 字体标签悬停在 firefox 上不起作用，但在 chrome 上正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53933676/