CSS悬停在本地工作，但不在开发服务器上

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

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

例如为：

.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; 
}