jquery - 使用 fancybox 和 css 悬停效果 - 冲突

Question

我有一个简单的 css 悬停效果，效果很好，但我还需要向同一组图像添加一个 fancybox 画廊，但即使 fancybox 工作正常，悬停效果也没有。

悬停效果使用此 css:

.hov-eft:hover > div {
opacity: 0.3;
-webkit-transform:rotate(0deg);
}

.hov-eft:hover > div:hover {
opacity: 1.0;
transition: all 750ms ease;
-webkit-transition: all 750ms ease;
transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}

我只是将这个类添加到该部分，它可以工作，但是将 fancybox 扔进去，我很挣扎。

这是我的其余代码:

HTML

<section class="hov-eft">
<div class="image-container">
                        <a rel="test1" href="#" ><img    src="http://s29.postimg.org/nkhruktyb/image.jpg" style="margin-right:25px;" alt=""/></a>
                        <a rel="test1" href="#" ><img src="http://s29.postimg.org/nkhruktyb/image.jpg" style="margin-right:25px; display:none;" alt="" /></a>
                        <a rel="test1" href="#" ><img src="http://s29.postimg.org/nkhruktyb/image.jpg" style="margin-right:25px; display:none;" alt="" /></a>
                        <a rel="test1" href="#" ><img src="http://s29.postimg.org/nkhruktyb/image.jpg" style="margin-right:25px; display:none;" alt="" /></a>


                        <a rel="test2" href="#" ><img src="http://s29.postimg.org/8r349tm77/image.jpg" style="margin-right:25px;" alt=""/></a>
                        <a rel="test2" href="#" ><img src="http://s29.postimg.org/8r349tm77/image.jpg" style="margin-right:25px; display:none;" alt="" /></a>
                        <a rel="test2" href="#" ><img src="http://s29.postimg.org/8r349tm77/image.jpg" style="margin-right:25px; display:none;" alt="" /></a>
                        <a rel="test2" href="#" ><img src="http://s29.postimg.org/8r349tm77/image.jpg" style="margin-right:25px; display:none;" alt="" /></a>
   </div>
</section>

JS

$("a[rel=test1]").fancybox();
$("a[rel=test2]").fancybox();

JSFIDDLE HERE

任何人都可以建议我如何让这两个一起工作吗？

Answer 1

试试这个解决方案:

.hov-eft  div:hover a{
   opacity: 0.3;
   -webkit-transform:rotate(0deg);
}

.hov-eft  div a:hover {
   opacity: 1.0;
   transition: all 750ms ease;
   -webkit-transition: all 750ms ease;
   transform-origin: 50% 0%;
   -webkit-transform-origin: 50% 0%;
   transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
}

Demo