溢出隐藏不工作悬停

我有这个div，我想显示title，当我徘徊在title股利。问题是即使我悬停在div的边缘，我也会得到悬停效果。所以当我将鼠标悬停在它上面时，div被视为正方形而不是圆形。这在Firefox上运行得非常好，但不适用于Chrome和Safari。溢出隐藏不工作悬停

小提琴：http://jsfiddle.net/roeg629c/2/

注：我不想改变图像的长宽比。图像应该是100% of the parent height。

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的.title，并且opacity的

.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}

来源

2015-11-08 Rexhin Hoxha

一般情况下，你需要做的就是添加边框半径与'.title'元素将匹配'.video_wrap' –

它不工作。 –

@Alon这是有道理的，我想到了它，并已经尝试过，但是.....不，它没有工作。现在再考虑一下，当然它不会起作用，否则它已经与主'div'上的当前边界半径一起工作。 –

避免定位。

.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>

来源

2015-11-08 15:51:51

谢谢。所以标题的高度是通过使用利润率来实现的？ –

是的，使图像div绝对，并按保证金推下标题 –

溢出隐藏不工作悬停

回答

相关问题