jquery - 简单的 jquery 标题不起作用

Question

我正在尝试制作一个简单的小标题框，当您将鼠标悬停在元素上时，该标题框会淡入元素总宽度的 50%，并一直保持在那里，直到您将鼠标移出该元素为止。

它在某种程度上起作用，但问题是当我将鼠标移到 .caption div 内的链接上时，它会淡入和淡出(闪烁)，几乎就像它将标题视为单独的元素，即使它位于主元素内部元素。如果我快速将鼠标移开和悬停，它似乎还会随机闪烁几次。

这是我的 CSS:

.thumbs li {
    float: left;
    margin-right: 20px;
    width: 305px;
    height: 200px;
    position: relative;
    border: 1px solid red;
}
.thumbs li img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
.thumbs li .caption {
    position: absolute;
    width: 50%;
    height: 100%;;
    display: none;
    z-index: 2;
    text-align: center;
    color: #ffffff;
    background: rgba(0, 0, 0, .75);
}
.thumbs li .caption a {
    color: #ffffff;
}

这是我的 jQuery:

$('.thumbs li').mouseover(function() {      
    $(this).find('.caption').fadeIn(500);
});

$('.thumbs li').mouseout(function() {       
    $(this).find('.caption').fadeOut(500);
});

这是我的 HTML:

<ul class="thumbs">
<li>

    <img src="images/1.gif" alt="" />

    <div class="caption">

        <h4>Cycliner</h4>

        <p>
        <a href="#">Visit website</a>
        <br />
        <a href="#">View project</a>
        </p>

    </div>

</li>
</ul>

Answer 1

您应该使用 mouseleave 函数而不是 mouseout

http://jsfiddle.net/gygHg/

$('.thumbs li').mouseover(function() {      
$(this).find('.caption').fadeIn(500);
});

$('.thumbs li').mouseleave(function() {       
$(this).find('.caption').fadeOut(500);
});