jquery鼠标悬停效果bug,mouseover事件总是在mouseout上触发几次

Question

我有一个简单的图库网格,其中嵌套的跨度显示标题,我想在鼠标悬停时向上滑动,并隐藏鼠标.

一切正常,除非鼠标向下移动到标题所在的位置和/或从图块的底部悬停在图块之外,然后悬停效果会无法控制地重复几次.

起初我以为可能是因为跨度包含在锚点中,这是悬停触发器,但将其移出也不起作用.

有任何想法吗 ？

演示在这里:http://www.winterealm.com/gallery/

标记:

<div class="gallery_container">
    <ul>
        <li><a href=""><img src="assets/img/artistisch.jpg" alt="aaa"/><span class="title">Category A</span></a></li>
        <li><a href=""><img src="assets/img/attraktiv.jpg" alt="bbb"/><span class="title">Category B</span></a></li>
        <li><a href=""><img src="assets/img/historisch.jpg" alt="ccc"/><span class="title">Category C</span></a></li>
        <li><a href=""><img src="assets/img/popart.jpg" alt="ddd"/><span class="title">Category D</span></a></li>
        <li><a href=""><img src="assets/img/portrait.jpg" alt="eee"/><span class="title">Category E</span></a></li>
        <li><a href=""><img src="assets/img/sketch.jpg" alt="fff"/><span class="title">Category F</span></a></li>
    </ul>
</div>

这是jquery

$(document).ready(function(){
    $('.gallery_container a').mouseover(function(){
        $(this).children('.title').animate({
            opacity: 100,
            bottom: 0
        },200);
    });

    $('.gallery_container a').mouseout(function(){
        $(this).children('.title').animate({
            opacity: 0,
            bottom: -30
        },200);
    });
});

Answer 1

这里的问题是每次鼠标移过元素或子元素时鼠标悬停都会触发.请尝试使用mouseenter和mouseleave事件.