悬停时溢出隐藏不起作用

Question

我有这个

，我希望在悬停在

上时显示title。问题是即使我在

的边缘悬停，也会产生悬停效果。因此，当我在其上悬停时，

被视为一个正方形而不是圆形。这在Firefox上运行得很好，但在Chrome和Safari上不行。

Fiddle: http://jsfiddle.net/roeg629c/2/

注意：我不想改变图像的长宽比。图像应为父容器高度的100%。

HTML

<div class="video_wrap update" video_name="rikthejmna">
    <div class="related img_wrap"><img src="http://img.youtube.com/vi/XyzYVpJGRG8/hqdefault.jpg"></div>
    <div class="title">rikthejm na</div>
</div>

CSS

.video_wrap {
    width: 232px;
    height: 232px;
    display: inline-block;
    border-radius: 116px;
    overflow: hidden;
    margin: 10px;
    position: relative;
    z-index: 2;
}

.img_wrap img {height: 100%}

.related {height: 100%;}

.title {
    position: relative;
    top: -50px;
    left: 0px;
    background: #fff;
    height: 50px;
    opacity: .5;
    color: #f8008c;
    font-size: 12px;
    text-align: center;
    line-height: 50px;
    overflow: hidden;
    cursor: default;
    transition: all .5s ease-in;
}

.title:hover {opacity: 1}

- M1X

---

通常情况下，您需要将边框半径添加到 .title 元素以匹配 .video_wrap。 - Alon Eitan

@Alon 这很有道理，我也想到了并尝试过了，但是......不，它没有起作用。现在再次考虑，当然它不会起作用，否则它已经在主要的 div 上使用当前边框半径时就可以工作了。 - Racil Hilan

这是Chrome的一个bug。链接。 - Alex

我知道，但是我无法想到在CSS中的任何解决方法......好吧....也许我们可以使用覆盖层来代替overflow:hidden。这会有点复杂，所以给我一些时间来想出解决方案。 - Racil Hilan

我在win10上使用FF42和Chrome46看到了相同的行为。 - dippas

Answer 1

避免对 .title 进行定位以及改变透明度。

.video_wrap{
width: 232px;
height: 232px;
border-radius: 50%;
overflow: hidden;
margin: 10px;
}
.related {
width: 232px;
height: 232px;
position: absolute;
border-radius: 50%;
overflow: hidden;
z-index: -1;
}
.img_wrap img {
height: 100%;
}
.title{
margin: 185px 0 0;
background: rgba(255,255,255,.5);
line-height: 50px;
text-align: center;
transition: all .5s ease-in;
}
.title:hover{
  background: #fff;
}

<div class="video_wrap update">
<div class="related img_wrap"><img src="http://img.youtube.com/vi/XyzYVpJGRG8/hqdefault.jpg"></div>
<div class="title">
    rikthejm na
</div>
</div>

- Felix A J

---

谢谢。所以标题的高度是通过使用边距来实现的吗？ - M1X

是的，将图像div设置为绝对定位，并通过margin向下推标题。 - Felix A J