我有一个圆形的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>
原文地址:https://www.jb51.cc/html/224574.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。