打开奇特框弹出窗口时禁用背景悬停效果

Question

我在我的图库中使用了花式框。我的图库中的图像使用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)',

                },
            } 
        }, 
    });
});

到目前为止所有工作正常。问题出现在打开一个奇特的盒子弹出窗口并且弹出框上的关闭图标放在图像的顶部。我附上了这个问题的图片：

在这种情况下，当我尝试点击花式框上的关闭按钮时，花式框没有关闭，背景图像悬停效果正在工作。所以当一个精美的盒子弹出窗口是我要禁用图像上的悬停效果open.how这样做？