我有一个圆形的div,它有一个圆形图像和一个底部的标题,不透明度：0.5;在悬停时,不透明度应该变为1.它在所有桌面浏览器和Firefox for iOS上都很好,但它在Safari和Chrome for iOS上都不起作用.
小提琴：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}
解决方法
我找到了一个解决方法：如果你在div上加上onclick =“”,那么悬停就可以了.
你的HTML将是：
<link rel="stylesheet" href="hover.css" type="text/css"/>
<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" onclick=""><div class="title">bang bang</div></div>
</div>
</div>
