jquery - 使用 jquery 隐藏图像而不隐藏父 DIV 背景图像

Question

使用 Jquery，我将 div 内的 img 定位为在单击以显示其后面的视频 iframe 时隐藏。这很好用，但是，通过单击 div，它也会隐藏父 div 背景图像。

请点击以下视频之一查看工作示例：http: //london.illustratedpeople.com/genx.html

这似乎只是 Safari 中的一个问题，并且在 Chrome 中运行良好。

HTML：

<div class="profilevideo">
<img src="images/PLAY.png" width="600" height="338" alt="video" class="profile" />
<iframe src="http://player.vimeo.com/video/78191862?title=0&amp;byline=0&amp;portrait=0" width="600" height="338" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

jQuery：

$('.profilevideo > img').click(function(event) {
event.stopPropagation();
var $img = $(this);
$img.hide();
$img.next().show();
});

更新 这是对我看到的背景更改的引用，按点击后和点击前的顺序排列： imgur.com/sZ9ps59,wcFVWEj#0（1. 点击后，然后 2.之前）

在此先感谢，我找不到解决此问题的方法！

布拉德利

Answer 1

我可以想象的一件事（因为我无法从您的链接中真正看出）是当您隐藏图像时，它的 cssdisplay属性设置为 none；因此，包含的 div 将缩小，因为没有什么可以将其强制为当前大小。

尝试手动设置容器的widthandheight看看它是否仍然发生。