Question

我尝试实现的悬停效果在本地很有效，但在上传到我们的开发时没有做任何事情。环境。

这是HTML ...

<a class="circle" href="/portfolio">portfolio</a>

现在，CSS ......

.circle{
display:inline-block;
width: 380px;
height: 380px;
line-height: 360px;
text-align: center;
background-color: #02193b;
border-radius: 50%;
font-size: 54px;
box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), inset 0 0 0 10px #a09176, 0 0 10px rgba(0,0,0,0.3);
transition: box-shadow 400ms ease-in-out;
-ms-transition: box-shadow 400ms ease-in-out;
-moz-transition: box-shadow 400ms ease-in-out;
-webkit-transition: box-shadow 400ms ease-in-out;
-o-transition: box-shadow 400ms ease-in-out;
color: white;
text-decoration: none !important;
text-transform: capitalize;

}

.circle:hover  {
box-shadow: inset 0 0 0 0 rgba(0,0,0,0.6), inset 0 0 0 20px #a09176, 0 0 20px rgba(0,0,0,0.3);
transition: box-shadow 400ms ease-in-out;
-ms-transition: box-shadow 400ms ease-in-out;
-moz-transition: box-shadow 400ms ease-in-out;
-webkit-transition: box-shadow 400ms ease-in-out;
-o-transition: box-shadow 400ms ease-in-out;
background-color: #01142F;

}

我已经搜索过了，还没有找到一个可行的解决方案。我很感激帮助！

Answer 1

我在 create-react-app 中遇到了类似的问题，我在工具提示上的 CSS :hover 状态在本地工作但在部署时无效。

事实证明，缩小构建步骤将元素的不透明度从 100% 转换为 1%，因此它从未完全动画化到最终状态。

幸运的是，对于 opacity 属性，放置终止的“%”是可选的，因此我能够通过删除尾随百分号来解决这个遗漏。

如果 % 符号在那里，我不确定为什么双 00 会被缩小器删除 - 对我来说似乎是一个错误......

检查您的缩小产品，看看您是否会遇到类似的问题，无论是百分比还是毫秒之前的双 00。

Answer 2

我认为问题在于CSS的排序。如上所述here，您应该列出最后的实际属性，并首先列出供应商前缀。

E.g：

.circle {
    -webkit-transition: box-shadow 400ms ease-in-out;
    -moz-transition: box-shadow 400ms ease-in-out;
    -ms-transition: box-shadow 400ms ease-in-out;
    -o-transition: box-shadow 400ms ease-in-out;
    transition: box-shadow 400ms ease-in-out;
}

CSS Hover在本地工作，但不在dev服务器上工作

2 个答案: