0

イメージ ギャラリーにファンシー ボックスを使用しています。ギャラリーのイメージは css を使用して角度が付けられており、カード パックのように見えます。ユーザーが画像をクリックすると、派手なキツネのポップアップが表示されます.hereはそのための私のコードです。

.book:hover {

   -webkit-transform: perspective(500px) rotateY(0deg) scale(1);
   -moz-transform: perspective(500px) rotateY(0deg) scale(1);
   -ms-transform: perspective(500px) rotateY(0deg) scale(1);
   -o-transform: perspective(500px) rotateY(0deg) scale(1);
   transform: perspective(500px) rotateY(0deg) scale(1);
   box-shadow: none;
   z-index: 5;
  }
.book {

 -webkit-transform: perspective(500px) rotateY(22deg) scale(0.9);
 -moz-transform: perspective(500px) rotateY(22deg) scale(0.9);
 -ms-transform: perspective(500px) rotateY(22deg) scale(0.9);
 -o-transform: perspective(500px) rotateY(22deg) scale(0.9);
 transform: perspective(500px) rotateY(22deg) scale(0.9);

 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
  border-radius: 4px;

 -webkit-transition: all 0.2s ease;
 -moz-transition: all 0.2s ease;
 -o-transition: all 0.2s ease;
 transition: all 0.2s ease;

}

ファンシーボックスの初期化

<script type="text/javascript">
$(document).ready(function() {
    $("a.inline").fancybox({
        openEffect: 'elastic',
        openSpeed: 300,
        closeEffect: 'elastic',
        closeSpeed: 300,
        scrolling : 'no',
        helpers: {
            overlay: {
                css: {
                    'background': 'rgba(238,238,238,0.85)',

                },
            } 
        }, 
    });
});

ファンシーボックスポップアップが開かれ、ポップアップボックスの閉じるアイコンが画像の上に配置されると、問題が発生します。この問題の写真を添付し​​ました:

ここに画像の説明を入力

この状況で、ファンシーボックスの閉じるボタンをクリックしようとすると、ファンシーボックスが閉じず、背景画像のホバー効果が機能しています。したがって、ファンシーボックスのポップアップが開いているときに、画像のホバー効果を無効にしたい.それをするために?

4

0 に答える 0