CSS可見性屬性在Firefox中不起作用，內部<a>當懸停div時不顯示標記

Question

CSS可見性屬性在Chrome中完美運行，但在IE和Firefox中不起作用。該怎麼辦？

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，因爲在代碼中不需要它。