本文介绍了CSS :hover 在 iOS Safari 和 Chrome 上不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个圆形 div,底部有一个圆形图像和一个标题,opacity: 0.5;
悬停时,不透明度应该变为 1.它适用于所有桌面浏览器和 Firefox for iOS但它不适用于 Safari 或 iOS 版 Chrome.
I have a rounded div which has a rounded image and a title at the bottom whith opacity: 0.5;
On hover the opacity should become 1. It works fine on all desktop browsers and Firefox for iOS but it doesn't work on Safari nor 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}
推荐答案
我找到了一个解决方法:如果将 onclick=""
添加到 div 中,悬停将起作用.
I found a workaround: if you add onclick=""
to the div, the hover will work.
您的 html 将是:
Your html would be:
<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>
这篇关于CSS :hover 在 iOS Safari 和 Chrome 上不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!