溢出隱藏不工作懸停

我有這個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絕對，並按保證金推下標題 –

溢出隱藏不工作懸停

回答

相關問題