使用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

任何人都可以建议我怎么能得到2一起工作？

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