Mouseleave в jCarousel не работает в Opera и IE

Я использую плагин jCarousel. При наведении курсора на элемент в jCarousel мне нужно открыть всплывающее окно над этим элементом. Я не могу использовать простое наведение, потому что всплывающее окно больше, чем высота jCarousel (и скрытый переполнение не позволяет мне сделать это). Поэтому я клонирую это скрытое всплывающее окно (которое находится внутри элемента jCarousel) и добавляю его в тело. Все прекрасно работает, ожидайте в Opera и IE. Появляется всплывающее окно, но оно не уходит при отпускании мыши. Он уходит только тогда, когда я наведу на него другой элемент в jCarousel, и снова появляется только тогда, когда я дважды наведу на него курсор. Ну странное поведение. Может кто-нибудь помочь мне разобраться?

HTML:

<ul id="logo_scroll" class="jcarousel-skin-tango">
    <li>
        <a href="">
            <img src="/i/delete/logo_1.png" width="111" height="58" alt="" />
            <span>Description 1</span>
        </a>
        <a href="" class="logo_zoom">
            <img src="/i/delete/logo_2_zoom.png" alt="">
            <span>Description 1</span>
        </a>
    </li>
    <li>
        <a href="">
            <img src="/i/delete/logo_2.png" width="111" height="58" alt="" />
            <span>Description 2</span>
        </a>
        <a href="" class="logo_zoom">
            <img src="/i/delete/logo_2_zoom.png" alt="">
            <span>Description 2</span>
        </a>
    </li>
    <li>
        <a href="">
            <img src="/i/delete/logo_3.png" width="111" height="58" alt="" />
            <span>Description 3</span>
        </a>
        <a href="" class="logo_zoom">
            <img src="/i/delete/logo_2_zoom.png" alt="">
            <span>Description 3</span>
        </a>
    </li>
</ul>

JQuery:

$('.jcarousel-item').mouseenter(function(){
        var find_zoom = $(this).find('.logo_zoom')
            logo_pos = $(this).offset(),
            logo_zoom = find_zoom.clone().addClass('zoom_hovered').css('left', logo_pos.left - 10);
        $('body').append(logo_zoom);
        if($('.zoom_hovered').length > 1) {
            $('.zoom_hovered').remove();
        }
        else {
            $('.zoom_hovered').mouseenter(function(){
                $('body').append(logo_zoom);
            });
            $('.zoom_hovered').mouseleave(function(){
                $(this).remove();
            });
        }
    });

CSS для всплывающих окон:

.logo_zoom {
display: none;
position: absolute;
bottom: 46px;
height: 119px;
width: 136px;
padding: 26px 18px 31px;
z-index: 3;
text-align: center;
line-height: 1.23em;
text-decoration: none;
background: transparent url('/i/bg_zoom.png') no-repeat 0 0;
color: #e3e5c3;
img {
    width: 116px;
    max-height: 75px;
    padding-bottom: 7px;
}
&.zoom_hovered {
    display: block;
}

И если это имеет значение, это выглядит так: http://i17.photobucket.com/albums/b97/fiona_adam/Untitled-1-2.png

0 ответов

Другие вопросы по тегам