CSS透明的颜色覆盖层褪色不从iOS上使用

Question

我制作了图像网格，当您悬停在它们上时，半透明的覆盖层进出，出现了一些文本

我希望它能在移动设备上类似地工作，而不是在悬停时逐渐消失，当您点击

时，它会逐渐消失。

我设法在Android上进行了工作，但在手机上不进行。

我将显示我的代码和一些我尝试过的解决方案示例。我尝试了很多，但是我对JavaScript是新的（我在网站上有一些功能javaScript！），并且在iOS设备上没有任何作用。

JS小提琴：

https://jsfiddle.net/49H450G9/

我正在使用bootstrap，少。我的网格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() {});

3. 将以下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()，您可以将其隐藏。