0

基本的に、jqueryを使用してロールオーバーで作業しています。内部に画像があるサムネイルの通常のhtmlラップがあります。次に、ロールオーバーの場合、div を動的に追加し (ロールオーバーを後でアニメーション化するため)、その動的に追加された div 内で、代替テキストを実際のテキストとして画面に表示します。ロールアウトすると、非表示になります。

ここに基本的なhtmlがあります

<div id="portSecW">

                <div class="portThumbsL">
                     <a href="images/sitePortThumbs/2882.png"><img src="images/sitePortThumbs/2882.png" alt="2882films"/></a>
                    <div class="thumbTxtSmall">2882FILMS</div>
                </div>

    </div>

そしてここにjavascriptがあります

$('#portSecW div:not(".closeXbtn")').prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');


    $('.portThumbsL , .portThumbsR, .portSecRollOver, .portSecInner, h3').mouseover(function(){
        //$(this).css("background-color","#0099FF");//blue bg for thumgs
        $(this).children('.portSecRollOver').css("display","block");
        //$(this).children('.portSecRollOver').show();
        $(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr("alt") + "</h3>");

    });
////    
    $('.portThumbsL , .portThumbsR').mouseleave(function(){
        //$(this).css("background-color","#333");
        $(this).children('.portSecRollOver').css("display","none");
        //$(this).children('.portSecRollOver').hide();
    });

ここに問題があります。問題は、すべてが機能しているにもかかわらず、マウスアウト時にスタックすることがあることです。通常のようにロールオーバーすると、中央のテキストにマウスを置き、水平方向にロールアウト (左/右) すると、追加された div 自体が非表示にならないことがわかりました。それは画面にとどまるだけです。何をしても、div の上部または下部の領域にマウスを合わせると機能し、テキストがある場所にマウスを合わせるとすぐに動かなくなります。

ここに jsFiddle があるので、何が起こっているのかをすべて見ることができます。再び、マウスをボックスの上に置くと、中央にテキストが表示され (alt タグによって供給されます)、そこにマウスを置いて水平方向 (左//右) にロールアウトし、そこにとどまる様子を確認します。その後、上/下の部分にマウスを合わせると、通常のように動作します。

上記のjQueryセレクターでは、すべてのセレクターをそのボックス内に配置し、最初にそれらをすべて単独で試し、次に上記のようにすべて一緒に試しましたが、それが私を台無しにすることはありません。

こちらがjsFiddle http://jsfiddle.net/somdow/KSt6a/

ありがとうございます。

</p>

4

2 に答える 2

2 
$('.portThumbsL').hover(function(){        
    $(this).children('.portSecRollOver').css("display","block");
    $(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr('alt') + "</h3>");
}, function() {
    $(this).children('.portSecRollOver').css("display","none");
});

私はマウスオーバーとマウスリーブの方法に精通していませんが、同じ状況で、ハンドラーのインとアウトの両方でホバーを使用します。

于 2012-09-13T02:00:30.723 に答える
1

複雑なコードを単純な CSS:hover ステートメントに減らしますか?

http://jsfiddle.net/5jYem/

于 2012-09-13T02:08:50.507 に答える