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

使用Jquery，我将目标对准div中的一个img，当单击该img以显示其背后的视频iframe时，将其隐藏。 这很好，但是，通过单击div，它也会隐藏父div背景图像

请单击以下视频之一，查看此处的工作示例：

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

HTML:

更新 这是我看到的背景变化的参考，按点击后和点击前的顺序排列： （1.点击后2.点击前）

提前谢谢，我找不到解决这个问题的方法

布拉德利

我可以想象的一件事是（因为我无法从你的链接中分辨出来），当你隐藏图像时，它的css

display

属性被设置为none；因此，包含的div将收缩，因为不再有任何东西迫使它保持当前大小

尝试手动设置容器的

宽度

和

高度

，看看它是否仍然发生。

我可以想象的一件事（因为我无法从链接中真正分辨）是，当你隐藏图像时，它的css

显示

属性设置为无；因此，包含的div将收缩，因为不再有任何东西迫使它保持当前大小

尝试手动设置容器的

宽度

和

高度

，看看它是否仍然发生。

我可以想象的一件事（因为我无法从链接中真正分辨）是，当你隐藏图像时，它的css

显示

属性设置为无；因此，包含的div将收缩，因为不再有任何东西迫使它保持当前大小

尝试手动设置容器的

宽度

和

高度

，看看它是否仍然发生。

我可以想象的一件事（因为我无法从链接中真正分辨）是，当你隐藏图像时，它的css

显示

属性设置为无；因此，包含的div将收缩，因为不再有任何东西迫使它保持当前大小

---

---

尝试手动设置容器的

宽度

和

高度

，看看是否仍然发生这种情况。

在chrome和safari中，我觉得不错，它们都有相同的渲染引擎，所以不确定您看到了什么问题。对于我来说，在safari中单击视频时，背景图像会消失为黑色，而在chrome中则会保持不变。。这很奇怪吗？@TomChew headMillard Chrome 28+现在正在使用布局引擎。这是WebKit的一个分支，但是已经有了细微的区别，而且随着两个布局引擎的开发，它们的数量只会增加。在chrome和safari中，我觉得不错，它们都有相同的渲染引擎，所以不确定你看到的是什么问题。对我来说，在Safari中单击视频时，背景图像将消失为黑色，而在Chrome中则保持不变。。这很奇怪吗？@TomChew headMillard Chrome 28+现在正在使用布局引擎。这是WebKit的一个分支，但是已经有了细微的区别，而且随着两个布局引擎的开发，它们的数量只会增加。在chrome和safari中，我觉得不错，它们都有相同的渲染引擎，所以不确定你看到的是什么问题。对我来说，在Safari中单击视频时，背景图像将消失为黑色，而在Chrome中则保持不变。。这很奇怪吗？@TomChew headMillard Chrome 28+现在正在使用布局引擎。这是WebKit的一个分支，但是已经有了细微的区别，而且随着两个布局引擎的开发，它们的数量只会增加。在chrome和safari中，我觉得不错，它们都有相同的渲染引擎，所以不确定你看到的是什么问题。对我来说，在Safari中单击视频时，背景图像将消失为黑色，而在Chrome中则保持不变。。这很奇怪吗？@TomChew headMillard Chrome 28+现在正在使用布局引擎。这是WebKit的一个分支，但已经存在细微的差异，并且随着两个布局引擎的开发，它们的数量只会增加。不幸的是，如果我设置.profilevideo高度和宽度，似乎没有什么区别。。并且包含的div已经设置为width:100%，height 100%。。。还有什么想法吗？！我刚下载了safari。“背景图像”到底是什么？我看到的是（点击前后）：Safari、Chrome和Opera 12.16看起来都是这样。这太奇怪了。。背景图像是白色容器后面的图像。。。对我来说，这会发生（1.单击后，然后2.单击前）确定我刚刚注意到的一件事：您的背景图像位于名为

的标记上。这不符合任何html标准。也许就是这样？我想试试

div

吧？不，没有区别。如果我拿走“$img.next（）.show（）；”在jquery中，背景不会改变，但视频不会显示。这行有其他选择吗？不幸的是，如果我设置.profilevideo的高度和宽度，它似乎没有什么区别。。并且包含的div已经设置为width:100%，height 100%。。。还有什么想法吗？！我刚下载了safari。“背景图像”到底是什么？我看到的是（点击前后）：Safari、Chrome和Opera 12.16看起来都是这样。这太奇怪了。。背景图像是白色容器后面的图像。。。对我来说，这会发生（1.单击后，然后2.单击前）确定我刚刚注意到的一件事：您的背景图像位于名为

的标记上。这不符合任何html标准。也许就是这样？我想试试

div

吧？不，没有区别。如果我拿走“$img.next（）.show（）；”在jquery中，背景不会改变，但视频不会显示。这行有其他选择吗？不幸的是，如果我设置.profilevideo的高度和宽度，它似乎没有什么区别。。并且包含的div已经设置为width:100%，height 100%。。。还有ide吗

<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>

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