我有一张图片,在该图片之上是另一张较小的图片。单击第一张图像时,第二张图像出现,再次单击第一张图像时,第二张图像消失。我的问题是当第二张图片出现在第一张图片上时,它覆盖的第一张图片的区域无法点击。是否可以通过第二张图片点击第一张图片?
这是第二张图片的 HTML(用 PHP 生成):
Echo '<img src="images/tick.png" id="tick' . $i .'" class="hidden" style="position: absolute; top: 0px; left: 70%;"/>';
最佳答案
只需将两个图像放在一个容器 div
中,然后将 click
事件处理程序附加到该容器而不是更大的图像。这样您就可以简单地使用事件冒泡(这在大图像上不可用,因为它不能有子元素,例如小图像)。
在这里找到可行的解决方案:
$(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>
我假设您的用例是某种复选框替换元素?在这种情况下,您可能也会感兴趣:
如果是这种情况,我会将周围的 div
改为 label
,这样它也会自动检查您的(可能隐藏的)真实复选框。
关于html - 制作 HTML 图片 "click-see-through",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30726084/