2

I'm using jCarousel plugin. When I hover an item in jCarousel I need a popup open over this item. I can't use simple hover, because the popup is bigger than jCarousel's height (and overflow hidden doesn't let me do this). So I clone this hidden popup (which is placed inside jCarousel's item) and append it to the body. Everything works great except in Opera and IE. The popup appears, but it doesn't leave on mouse leave. It leaves only when I hover other items in jCarousel and it appears again only when I twice hover the item. Well, weird behaviour. Can someone help me to sort it out?

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 for popup:

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

And if it matters it looks like this: http://i17.photobucket.com/albums/b97/fiona_adam/Untitled-1-2.png

4

0 回答 0