隐藏图像使用jquery没有也隐藏父DIV背景图像

使用jquery我瞄准一个div内的img隐藏点击以揭示它后面的视频iframe。这工作正常，但是，通过单击div，它也隐藏父div背景图像。隐藏图像使用jquery没有也隐藏父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.before）

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

布拉德利

来源

2013-11-04 Bradley Bell

对我来说在Chrome和Safari浏览器中看起来不错，它们都具有相同的渲染引擎，因此不确定您看到的是什么问题。 –

对于我在Safari中点击视频时，背景图像会消失为黑色，并在Chrome中保留..这很奇怪吗？ –

@ TomChew-headMillard Chrome 28+现在使用[Blink]（https://en.wikipedia.org/wiki/Blink_%28layout_engine%29）布局引擎。这是WebKit的一个分支，但是它们之间已经有了细微差别，随着两种布局引擎的不断发展，它们的数量也将不断增加。 – ajp15243

有一件事我能想象到（因为我真的不能从你的链接告诉）是，当你隐藏图像，它的CSS display属性设置为none;因为这个原因，包含的div将会缩小，因为没有任何东西可以将它强制为当前的大小了。

尝试手动设置容器的width和height，看看它是否仍然发生。

来源

2013-11-04 17:45:31 moritzpflaum

不幸的是，如果我设置.profilevideo的高度和宽度，它似乎没有区别..而包含div已被设置为宽度：100％，高度100％...任何更多的想法？ –

我只是下载Safari。什么是“背景图像”？我看到的是（点击之前和之后）：http://imgur.com/QOdVibL,upuVsCU 它看起来像Safari，Chrome和Opera 12.16。 – moritzpflaum

多数民众赞成在奇怪..背景图像是白色容器后面的图像...对我来说，这发生http://imgur.com/sZ9ps59,wcFVWEj#0（1.点击后，然后2.before） –

隐藏图像使用jquery没有也隐藏父DIV背景图像

回答

相关问题