Jquery 当花式框弹出窗口打开时禁用背景悬停效果

我正在为我的图像库使用fancy box。我的库中的图像使用css倾斜，看起来像一个卡片包。当用户将鼠标悬停在图像上时，图像会旋转，看起来是平面的（旋转到0度）。当用户单击图像时，fancy fox弹出窗口会出现。这是我的代码

.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)',

                },
            } 
        }, 
    });
});

$（文档）.ready（函数（）{
$（“a.inline”）.fancybox({
openEffect:'弹性'，
开放速度：300，
闭合效应：“弹性”，
接近速度：300，
滚动：“否”，
助手：{
覆盖：{
css:{
‘背景’：‘rgba（238,0.85）’，
},
} 
}, 
});
});

到目前为止，一切正常。当打开一个奇特的弹出框，并将弹出框上的关闭图标置于图像顶部时，问题就会出现。我已附上本期的照片：

---

在这种情况下，当我尝试单击fancy box上的“关闭”按钮时，fancy box没有关闭，背景图像悬停效果正在工作。因此，我想在fancy box弹出窗口打开时禁用图像上的悬停效果。如何做到这一点？

在正常情况下，fancy box覆盖（变暗）阻止后面的页面，因此不会出现任何悬停效果，我猜您的css声明有问题。什么浏览器/操作系统再现了这种行为？这个问题发生在谷歌浏览器上。firefox运行良好