0

Jquery を使用して、div 内の img をターゲットにして、クリックすると非表示になり、その背後にあるビデオ iframe が表示されます。これは問題なく動作しますが、div をクリックすると、親 div の背景画像も非表示になります。

http://london.illustratedpeople.com/genx.htmlのビデオの 1 つをクリックして、ここで実際の例をご覧ください。

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.前)

事前に感謝します、これを修正する方法が見つかりません!

ブラッドリー

4

1 に答える 1

3

私が想像できることの1つは（リンクからは実際にはわからないため）、画像を非表示にすると、そのcssdisplayプロパティがnoneに設定されることです。そのため、現在のサイズに強制するものは何もないため、含まれている div は縮小します。

widthコンテナのとを手動で設定してみてheight、それでも発生するかどうかを確認してください。

于 2013-11-04T17:45:31.527 に答える