javascript - CSS 透明颜色叠加淡入淡出不适用于 iOS

Question

我制作了一个图像网格，当您将鼠标悬停在它们上方时，一个半透明的覆盖层会淡入淡出并出现一些文本

我希望它在移动设备上也能类似地工作，只是它不是在你悬停时淡入，而是在你点击时淡入

我已经设法让这个在 android 上工作，但在手机上不行。

我将展示我的代码和我尝试过的一些解决方案示例。我已经尝试了很多，但我对 javascript 还很陌生(虽然我的网站上有一些功能正常的 javascript!)但在 iOS 设备上没有任何效果。

Js fiddle :

https://jsfiddle.net/49h450g9/

我正在使用 bootstrap 和 less。我的网格 HTML 代码:

<div class="col-sm-5 col-xs-5"><div class="image-wrap">

<img src="assets/images/image1.jpg">
<div class="overlay purple2">
<br>
    <h3>image 1</h3>
    <hr>
      <p>description</p>
      <br>
      <a href="#" class="btn btn-white btn-lg">View Website</a>
    </div>
</div>
</div>
<div class="col-sm-3 col-xs-3"><div class="image-wrap">
<img src="assets/images/image2.jpg">

    <div class="overlay blue">
    <h3>image 2</h3>
    <hr>
      <p>description</p>
      <br>
      <a href="#" class="btn btn-white btn-lg">View Website</a>
    </div>

</div>
</div>
<div class="col-sm-4 col-xs-4"><div class="image-wrap">
<img src="assets/images/image4.jpg">
<div class="overlay purple1">
    <h3>image 3</h3>
    <hr>
      <p>description</p>
      <br>
      <a href="#" class="btn btn-white btn-lg">View Website</a>
    </div>

</div>  
</div>
</div>
</div>
<div class="container-fluid">
<div class="row"> 
<div class="col-sm-7 col-xs-7"><div class="image-wrap">
<img src="assets/images/image5.jpg">
<div class="overlay blue">
    <h3>image 5</h3>
    <hr>
      <p><strong>description</p>
      <br>
      <a href="#" class="btn btn-white btn-lg">View Website</a>
    </div>

</div>
</div>
<div class="col-sm-5 col-xs-5"><div class="image-wrap">
<img src="assets/images/image6.jpg">
<div class="overlay purple2">
    <h3>Image 6</h3>
    <hr>
      <p>description</p>
      <br>
      <a href="about-us.php" class="btn btn-white btn-lg">View Website</a>
    </div>
    </a>
</div>

    </div>
   </div>
</div>

CSS:

.image-wrap {
display: inline-block;
position: relative;  
}
.overlay {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
color:white;
opacity: 0;
transition:opacity .5s ease-out;
text-align: center;
hr {
border: 1px solid #fff;
width: 10%;
 }

}

.image-wrap:hover .overlay {
opacity: 1;
}

.red {
background: rgba(102,67,154,0.7);
}

.blue {
background: rgba(23,56,179,0.7);
}
.purple1 {
background: rgba(140,23,179,0.7);
}

.purple2 {
background: rgba(71,13,142,0.7);
}

我尝试过的解决方案包括:

1. 添加

   onclick=""

到图像包装div元素

2 将 JS 行添加到我的 js 文件中:

$('body').bind('touchstart', function() {});

1. 将以下 js 添加到我的 js 文件中:

2 将 JS 行添加到我的 js 文件中:

$(document).ready(function(){

$(".overlay").hover(function(){
//On Hover - Works on ios
$("p").hide();
}, function(){
//Hover Off - Hover off doesn't seem to work on iOS
$("p").show();
})
});

但是，在 iOS 上，当我点击没有文本或半透明覆盖淡入时，我的所有解决方案都不起作用

我已经为此工作了将近一个星期，并在此处查看了很多问题，但我找不到适合我的解决方案

任何帮助将不胜感激:)

谢谢!

Answer 1

使用:active伪类代替:hover。在触摸移动设备中，一旦悬停被触发，一旦你的手指离开它就不会被移除。它需要您点击屏幕上的其他地方。

类似地，在 jquery 中，您可以使用 mousedown() 和 mouseup() 来达到相同的目的。在 mousedown() 上，您可以显示叠加层，在 mouseup() 上，您可以隐藏它。