html - 制作 HTML 图片 "click-see-through"

Question

我有一张图片，在该图片之上是另一张较小的图片。单击第一张图像时，第二张图像出现，再次单击第一张图像时，第二张图像消失。我的问题是当第二张图片出现在第一张图片上时，它覆盖的第一张图片的区域无法点击。是否可以通过第二张图片点击第一张图片？

这是第二张图片的 HTML(用 PHP 生成):

Echo '<img src="images/tick.png" id="tick' . $i .'" class="hidden" style="position: absolute; top: 0px; left: 70%;"/>';

Answer 1

只需将两个图像放在一个容器 div 中，然后将 click 事件处理程序附加到该容器而不是更大的图像。这样您就可以简单地使用事件冒泡(这在大图像上不可用，因为它不能有子元素，例如小图像)。

在这里找到可行的解决方案:

https://jsfiddle.net/6nnwy3xw/

$(document).ready(function() {
    $('.imgcontainer').on('click', function() {
        $(this).toggleClass('toggleImg');
    });
})

.imgcontainer {
    height: 300px;
    width: 300px;
    position: relative;
}

.imgcontainer img:first-child {
    display: block;
    height: 300px;
    width: 300px;
}

.imgcontainer img+img {
    position: absolute;
    top: 50px;
    left: 50px;
    opacity: 0;
    transition-duration: 0.3s;
}

.imgcontainer.toggleImg img+img {
    opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="imgcontainer">
    <img src="http://lorempixel.com/300/300" />
    <img src="http://lorempixel.com/200/200" />
</div>

我假设您的用例是某种复选框替换元素？在这种情况下，您可能也会感兴趣:

Use images like checkboxes

如果是这种情况，我会将周围的 div 改为 label，这样它也会自动检查您的(可能隐藏的)真实复选框。