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);
});

Answer 2

$('.thumbs li').mouseover(function()
{
    $(this).find('.caption').stop(false,true).fadeIn(400);
});
$('.thumbs li').mouseout(function()
{
    $(this).find('.caption').stop(false,true).fadeOut(400);
});

停止将帮助您的动画闪烁和持久。我制作了一个非常类似于你的jQuery插件：）

Answer 3

使用mouseenter()和mouseleave()代替您当前绑定的事件。那些触发鼠标进入它们所附着的元素的边界，并且由于内部元素而不会重新触发。

Here's an example

简单的jquery标题不起作用

3 个答案: