我有这个div,我想显示将title
鼠标悬停在title
div上的时间。问题是,即使将鼠标悬停在div的边缘上,我也会获得悬停效果。因此,当我将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
.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}
避免定位.title
和opacity
。
.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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句