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，这样它也会自动检查您的（可能隐藏的）真实复选框。

Answer 2

如果我理解您正确描述的问题，可以尝试关闭第二个图像的指针事件，通常会显示 over 点击目标：

.two { pointer-events: none; }

请注意，只有Internet Explorer 11及更高版本（以及Chrome和Firefox）中的HTML才支持此功能。对于SVG，IE 9中提供了支持。如果需要，这可能足以解决问题。

小提琴：http://jsfiddle.net/tbqxjp19/

为了获得更好的支持，您应该将处理程序移动到一个不会受阻的元素，因此总是可以切换第二个图像的可见性：

<div class="images">
    <img src="http://placehold.it/100x100" class="one" />
    <img src="http://placehold.it/100x100/000000" class="two" />
</div>

document.querySelector( ".images" ).addEventListener( "click", function () {
    this.classList.toggle( "toggled" );
});

上面简单地将处理程序绑定到.images容器上的单击事件，切换将隐藏和/或显示第二个图像的类，给定以下内容：

.toggled .two {
    opacity: .1;
}

小提琴：http://jsfiddle.net/tbqxjp19/1/

Answer 3

试试这个，如果你对jquery解决方案没问题的话。

<强> HTML

<img src="images/large.png" class ="image" id="image1" style="position: absolute; top: 0px; left: 0px;" />
<img src="images/small.png" id="image2" class ="image" style="position: absolute; top: 0px; left: 0px; z-index:10;" />

<强> CSS

.hiddenimage{
 display:none;
}

<强> JQuery的

$(".image").click(function(){
  ("#image2").toggleClass("hiddenimage");
})

制作HTML图片＆＃34;点击浏览＆＃34;

3 个答案: