功能悬停 - 错误

Question

欢迎。

我希望得到以下效果： 当您移动图片时，它会显示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);
        }
    );

提前感谢您的帮助。

Answer 1

问题是描述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);})
        }
    );​

Answer 2

您可以使用CSS：

.section:hover .description {
    ...
}

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