CSS透明颜色叠加淡入在iOS上不起作用

Question

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

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

我设法使它在android上工作，但在手机上不行。

我将展示我的代码和一些我尝试过的解决方案示例。 我已经尝试了很多，但是我对javascript还是比较陌生（虽然我的网站上有运行中的javascript！），但是在iOS设备上没有任何作用。

小提琴：

https://jsfiddle.net/49h450g9/

我正在使用引导程序，并且使用更少。 我的网格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()可以隐藏它。