0

我正在为我的图片库使用花式框。我的画廊中的图片使用 css 倾斜，它看起来像一个卡片包。当用户将鼠标悬停在图像上时，图像旋转并且看起来平坦（旋转到 0 度）。当用户单击图像会出现花哨的狐狸弹出窗口。这是我的代码。

.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