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

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

1 个答案: