我有一个圆角div,其中包含一个圆角图片和一个带有 opacity: 0.5;
的底部标题。在悬停时,透明度应变为1。它在所有桌面浏览器和Firefox for iOS上都可以正常工作,但在Safari和Chrome for iOS上不起作用。
Fiddle: https://jsfiddle.net/a10rLbnL/2/
HTML:
<div class="video_wrap update">
<div class="content">
<div class="img_wrap"><img src="https://i.ytimg.com/vi/0HDdjwpPM3Y/hqdefault.jpg"></div>
<div class="title_wrap"><div class="title">bang bang</div></div>
</div>
</div>
CSS:
.video_wrap {
display: inline-block;
width: 30%;
padding-bottom: 30%;
margin: 0 1%;
position: relative;
vertical-align: top;
}
.content {
position: absolute;
height: 100%;
width: 100%;
}
.img_wrap {
height: 100%;
border-radius: 120px;
overflow: hidden;
}
.title_wrap {
line-height: 50px;
top: -50px;
height: 50px;
position: relative;
left: 0px;
background: #fff;
color: #f8008c;
font-size: 12px;
text-align: center;
cursor: default;
opacity: 0.5;
transition: all .5s ease-in;
min-height: 50px;
}
.img_wrap img {
height: 100%;
cursor: pointer;
}
.title_wrap:hover {opacity: 1}
onclick = ""
,那么悬停效果就会起作用。请查看更新后的答案。 - Wouter van Dijke