我有一个圆形的 div,它有一个圆形的图像和底部的标题 opacity: 0.5;
悬停时不透明度应该变为 1。它在所有桌面浏览器和 Firefox for iOS 上工作正常但它不适用于适用于 iOS 的 Safari 或 Chrome。
小提琴: 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}
原文由 M1X 发布,翻译遵循 CC BY-SA 4.0 许可协议
我找到了一个解决方法:如果您将
onclick=""
添加到 div,悬停将起作用。你的 html 将是: