Простой заголовок jquery не работает

Question

Я пытаюсь создать простой маленький блок с надписью, который при наведении курсора мыши на элемент увеличивается до 50% от общей ширины элемента и остается там до тех пор, пока вы не наведите курсор мыши на элемент.

Это работает несколько, но проблема в том, что когда я наведу курсор мыши на ссылку внутри div .caption, он исчезает и вспыхивает (мигает), почти как при обработке заголовка как отдельного элемента, даже если он находится внутри элемент. Кроме того, кажется, что несколько раз случайно вспыхивают, если я наведите курсор мыши и быстро наведите курсор мыши.

Вот мой 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() вместо событий, к которым вы привязываетесь в настоящее время.Эти триггеры при наведении мыши на границы элемента, к которому они присоединены, и не срабатывают повторно из-за внутренних элементов.

Вот пример