Html CSS：悬停在 iOS Safari 和 Chrome 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35187970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS :hover not working on iOS Safari and Chrome
提问by Rexhin Hoxha
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.
我有一个圆形的 div，它在底部有一个圆形的图像和一个标题，opacity: 0.5;悬停时不透明度应该变为 1。它在所有桌面浏览器和 Firefox for iOS 上都可以正常工作，但它在 Safari 或 Chrome for iOS 上不起作用。
Fiddle: https://jsfiddle.net/a10rLbnL/2/
小提琴：https: //jsfiddle.net/a10rLbnL/2/
HTML:
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:
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}
回答by Wouter van Dijke
I found a workaround: if you add onclick=""to the div, the hover will work.
我找到了一个解决方法：如果您添加onclick=""到 div，悬停将起作用。
Your html would be:
您的 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>
回答by Andréle
The iOS Browser needs an element that is clickable by default. If you use HTML5 you can change the wrapper divto an a-tag:
iOS 浏览器需要一个默认可点击的元素。如果您使用HTML5，你可以改变包装div到a-tag：
<a href="javascript:void(0);" class="title_wrap"><div class="title">bang bang</div></a>
<a href="javascript:void(0);" class="title_wrap"><div class="title">bang bang</div></a>
and set it to an block element:
并将其设置为块元素：
.title_wrap {
...
display:block;
}
If you don't use HTML5 you have to change the <div class="title">to an inline elment like <span class="title">so the code is valid.
如果您不使用 HTML5，则必须将 更改<div class="title">为内联元素，<span class="title">这样代码才有效。
