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，这就是为什么您在 chrome 中看到闪光。您可以阅读更多关于转换属性 here 的信息。

Chrome/Opera 中的边界半径和溢出（悬停时）

border-radius and overflow (on hover) in Chrome/Opera

css

google-chrome

overflow

hover