0
我遇到Chrome & Opera问题。我正在使用border-radius来创建“circle divs”,并且我想在悬停的这个div内显示一些文本。Chrome/Opera中的边界半径和溢出(悬停时)
在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;
}