CSS可见性属性在Firefox中不起作用，内部当悬停div时不显示标记

Question

CSS可见性属性在Chrome中完美运行，但在IE和Firefox中不起作用。该怎么办？CSS可见性属性在Firefox中不起作用，内部<a>当悬停div时不显示标记

I tried both display:none and display:block 

以及visibility:hidden and visibility:visible 在铬这两种情况下都在IE和Firefox完美，但没有工作。

任何投入将是非常赞赏谢谢:)

请参见本文的jsfiddle：click here

问题被解决。

对于任何面临这种类型的问题，看看更新的jsfiddle click here

Answer 1

你可以试试这个：注：这是一个方法来解决你的问题

.circle { 
 
    margin: 36px; 
 
    display: inline-block; 
 
    padding: 16px; 
 
    text-align: center; 
 
    width: 180px; 
 
    height: 180px; 
 
    border-radius: 50%; 
 
    border: 2px solid #1d2087; 
 
} 
 

 
.circle::before, 
 
.circle::after { 
 
    position: absolute; 
 
    z-index: -1; 
 
    display: block; 
 
    content: ''; 
 
} 
 
.circle, 
 
.circle::before, 
 
.circle::after { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    -webkit-transition: all .5s; 
 
    transition: all .5s; 
 
} 
 

 
.circle { 
 
    position: relative; 
 
    z-index: 2; 
 
    background-color: #fff; 
 
    border: 2px solid #5c5eae; 
 
    color: transparent; 
 
    line-height: 50px; 
 
    overflow: hidden; 
 
} 
 

 
.circle::after { 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
    -webkit-transform: scale(.5); 
 
    transform: scale(.5); 
 
} 
 
.circle:hover::after { 
 
    background: #5c5eae; 
 
    border-radius: 50%; 
 
    -webkit-transform: scale(.9); 
 
    transform: scale(.9); 
 
} 
 

 
.circle1 { 
 
    opacity: 0.4; 
 
} 
 

 
.circle2 { 
 
    opacity: 0.6; 
 
} 
 

 
.circle3 { 
 
    opacity: 0.8; 
 
} 
 

 
.circle a { 
 
    text-decoration: none; 
 
    color: transparent; 
 
} 
 

 
.circle h2 { 
 
    font-size: 60px; 
 
} 
 

 
.circle h2 small { 
 
    color: transparent; 
 
} 
 

 
.circle p { 
 
    font-size: 24px; 
 
    line-height: 26px; 
 
} 
 
a.hyper:hover { 
 
\t color: #fff; 
 
    visibility: visible; 
 
} 
 

 
a:hover, p:hover, .circle:hover, h2:hover{ 
 
    color: #fff; 
 
}

<div class="col-lg-3 col-md-3 col-sm-6" style="font-family: arial;"> 
 
     <div class="circle" id="userImg" style="background-image: url('http://i68.tinypic.com/1zfr32v.png'); background-position: center;"> 
 
      <a href="javascript:void(0);" onClick="LoadUrl('upd-details.jsp',1)" class="hyper"><h1>Profile<small></small><p>Update</p></h1></a> 
 
     </div> 
 
     </div>

注意：您也可以删除visibility财产，如果你wa nt，因为在代码中不需要它。