Chrome/Opera中的邊界半徑和溢出（懸停時）

Question

我遇到Chrome & Opera問題。我正在使用border-radius來創建「circle divs」，並且我想在懸停的這個div內顯示一些文本。

在Firefox和IE的各種工作正常。但是當元素（物品）在Chrome/Opera中徘徊時，溢出可見一秒。當我從元素中移除光標時，溢出再次可見（一秒鐘）。你可以看到它here。它應該看起來像第三個圖像。

<article> 
    <a href="/"> 
     <div class="info"> 
      <h3>Title</h3> 
     </div> 
     <img class="sw" src="images/image-sw.jpg"> 
     <img class="clr" src="images/image-colour.jpg"> 
    </a> 
</article> 

CSS：

article{ 
height: 300px; 
width: 300px; 
border-radius: 180px; 
margin: 0 auto; 
display: block; 
position: relative; 
overflow: hidden; 
background: #e3e3e3; 
padding: 5px; 
} 

.info{ 
position: absolute; 
background: #222222; 
color: #ffffff; 
height: 80px; 
width: 300px; 
top: 320px; 
padding: 10px 0; 
text-align: center; 
z-index: 2; 
overflow: hidden; 
} 

article:hover .info { 
top: 240px; 
} 

article img{ 
border-radius: 180px; 
position: absolute; 
left: 5px; 
top: 5px; 
display: block; 
} 

article .clr{ 
opacity: 0; 
transition: all 0.2s ease-in 0s; 
z-index: 1; 
} 

article:hover .clr{ 
opacity: 1; 
} 

Answer 1

從article .clr取出transition: all 0.2s ease-in 0s;。您正在看到transition以0.2s這就是爲什麼你看到鉻在閃光。你可以閱讀更多關於轉換屬性here。