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

【问题标题】：border-radius and overflow (on hover) in Chrome/OperaChrome/Opera 中的边框半径和溢出（悬停时）
【发布时间】：2016-07-08 05:25:50
【问题描述】：

我在使用 Chrome 和 Opera 时遇到问题。我正在使用边框半径创建“圆形 div”，并且我想在悬停时在此 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;
}

【问题讨论】：

标签： css google-chrome hover overflow

【解决方案1】：

从article .clr 中删除transition: all 0.2s ease-in 0s;。您正在看到 transition 采取 0.2s 这就是为什么您会看到 chrome 中的闪存。您可以阅读有关转换属性 here 的更多信息。

【讨论】：