Question

我在使用Chrome＆amp;歌剧。我正在使用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

从transition: all 0.2s ease-in 0s;移除article .clr。您看到了transition拍摄0.2s，这就是您在Chrome中看到闪光灯的原因。您可以阅读有关转换属性here的更多信息。

Chrome / Opera中的border-radius和overflow（悬停）

1 个答案: