2

jCarouselプラグインを使用しています。jCarousel で項目にカーソルを合わせると、この項目の上にポップアップを開く必要があります。ポップアップが jCarousel の高さよりも大きいため、単純なホバーは使用できません (また、overflow hidden ではこれができません)。そこで、この非表示のポップアップ (jCarousel のアイテム内に配置されている) を複製し、本文に追加します。Opera と IE を除いて、すべてがうまく機能します。ポップアップが表示されますが、マウスを離しても消えません。jCarousel で他のアイテムをホバーしたときにのみ表示され、アイテムを 2 回ホバーしたときにのみ再び表示されます。うーん、挙動不審。誰かがそれを整理するのを手伝ってくれますか?

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

4

0 に答える 0