Question

我有一个投资组合网格图片，当用户在手机上盘旋或点按一个带有一些文字和按钮的透明覆盖图时

我正在使用点击功能

它可以在我的触摸屏笔记本电脑上正常工作但不能在我的iOS手机或平板电脑上使用

第一次点击时会出现叠加层，但是当我再次点按时，除非我点击另一个网格图像，否则它不会消失。

我希望它在第二次点击时消失

我已经尝试了各种方法来完成这项工作，并且当我点击另一个网格图像时，我最接近它就会消失

这是我的代码： HTML 的

    <div class="col-xs-12 col-sm-7"><div class="image-wrap">
<div onclick="on()">
<img src="assets/images/pic.jpg">
<div class="overlay blue">
        <h3>Portfolio item 1</h3>
        <hr>
          <p><strong>Coming Soon</strong><br> some overlay text here</p>
          <br>
          <a href="contact-us" class="btn btn-white btn-lg">View Website</a>
        </div>

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

JS

function on() {
    document.getElementById("overlay").style.display = "block";
}

function off() {
    document.getElementById("overlay").style.display = "none";
}

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);
}
}

我最初只使用CSS尝试了这个，这给了我除了iOS之外的所有设备上所需的结果！

所以我决定使用on click功能来确保它适用于所有设备。我将on click函数添加到我编写的用于CSS的现有代码中，但由于我对JS很新，我想知道我是否在错误的位置（点击后）？我已经尝试了很多变化，但这是我能使它工作的最好的

关于如何使叠加在第二次点击时消失的建议的任何想法都会很棒！

js小提琴 https://jsfiddle.net/49h450g9/14/

请注意：这在触摸屏笔记本电脑上运行良好，而不是手机！

谢谢！

Answer 1

您在jsfiddle示例中的和关闭上的功能根本不起作用。发生的事情是你的悬停效果在普通屏幕上，因为移动设备的行为就像专注于移动设备一样。

此外，根据您的描述，我相信您的项目中有多个投资组合。因此，您有几个ID为 overlay 的元素，并且多次使用相同的ID不会对html进行验证，并且还会导致JavaScript错误。

为了让您的项目正常运行，请按照下面的列表进行操作：

确保在项目中添加了jQuery（通常在</body>之前）

现在让我们考虑以下这些投资组合项目

<div class="portfolio">
    <img src="images/portfolio-1.jpg" alt="...">
    <div class="overlay">Link</div>
</div>
<div class="portfolio">
    <img src="images/portfolio-2.jpg" alt="...">
    <div class="overlay">Link</div>
</div>
<div class="portfolio">
    <img src="images/portfolio-3.jpg" alt="...">
    <div class="overlay">Link</div>
</div>

然后像这样在媒体查询中给出正常的悬停css样式。所以它永远不会影响你的js样式（我决定媒体少于992px作为移动设备）：

.portfolio{
    background-color: #f1f1f1;
    position: relative;
}
.portfolio .overlay{
    background-color: rgba(0, 0, 0, 0.7);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
}
@media all and (min-width:992px){
    .portfolio:hover .overlay{
        opacity: 1;
    }
}

现在使用jQuery，您可以在用户点击任意.portfolio项目时使用事件，并在其上切换一个类，我们将通过该类添加更多css：

$(document).ready(function(){
    'use strict';

    $(.portfolio).on('click', function(){
        $(this).siblings('.portfolio').removeClass('hovered');
        $(this).toggleClass('hovered');
    });
});

现在，它会在第一次点击时添加hovered课程，并在第二次点击时删除hovered课程。此外，它还会从其他投资组合项中删除.hovered。现在添加与悬停效果相同的css：
```
.portfolio.hovered .overlay{
    opacity: 1;
}
```

Answer 2

尝试一下：

$("*").on("click, touchend", function(e) { $(this).focus(); });

或实现相反；

$("*").on("click touchend", function(e) { $(this).hover(); });

但是，悬停事件在ios或其他移动设备上无法正常运行。

另一建议是尝试使用

替换任何 css

:hover with :active.

点击功能显示悬停叠加 - 在点击时出现但在第二次点击时不会消失

2 个答案: