功能悬停 - 错误

时间:2012-03-16 09:22:23

标签: jquery hover

欢迎。

我希望得到以下效果: 当您移动图片时,它会显示div.description。离开图像后,div消失了。

        <li>
            <section class="projekt">
                <img src="images/projects/projekt1.jpg" alt="">
                <div class="description">

                </div>
            </section>
        </li>

我应该补充说div被定位为绝对描述图片,并启用了display:none; 下面的代码,不幸的是它不应该像它应该工作。当你移动时,图像出现在div中但在1秒后以100ms的速度消失而不是保留。

   $('section.projekt img').hover(
        function(){
            $(this).next().fadeIn(1000);
        },
        function(){
            $(this).next().fadeOut(100);
        }
    );

提前感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

问题是描述div来自img,它发出了img

的mouseout
  $('section.projekt img').hover(
        function(){
            $(this).next().fadeIn(1000);
            // add mouseout to description div not img
            $(this).next().mouseout(function(){$(this).fadeOut(100);})
        }
    );​

答案 1 :(得分:-1)

您可以使用CSS:

.section:hover .description {
    ...
}

对于“淡入淡出”效果,请详细了解CSS animation