Question

我制作了一个图像网格，当你将鼠标悬停在它们上面时，一个半透明的叠加层淡入淡出，出现一些文字

我希望这在移动设备上的工作方式类似，只是在您悬停时淡入淡出，当您点按时淡入淡出

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

我将展示我的代码以及我尝试过的一些解决方案示例。我已经尝试过这么多，但我对javascript很新（我在我的网站上运行了一些正常运行的javascript！）并且iOS设备上没有任何功能。

Js小提琴：

我正在使用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);
}

我尝试的解决方案包括：

添加

的onclick =＆＃34;＆＃34;

到图像换行div元素

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

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

将以下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()可以隐藏它。

CSS透明色彩叠加淡出功能无法在iOS

1 个答案: