0

私はある種のツールチップのようなもので問題を抱えています。リストアイテムに非表示のdivがあり、マウスオーバーで表示したい。問題は、リストがカルーセルであるため、それが最後のアイテムである場合、チップがオーバーフローの背後で失われることです。

私の解決策は、divを外に移動することでした。これは問題なく機能し、好きなように表示されます。しかし、私はそれを元に戻す方法を理解するのに苦労しています。divにはリンクが含まれているので、その上にカーソルを合わせる必要があります。

これが私が言っていることの簡単なバージョンです：

$('.wrapper li').mouseover(function() {
$(this).children('.This_is_hidden').clone().appendTo(".other").css('display', 'block' );

}
});


$('.wrapper li').mouseout(function() {

// i want to put it back in the same li

}

});

ここにmarkuoがあります：

<div class="wrapper">
<ul>
<li><a href="" title="Tall Glow"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a>
<div class="This_is_hidden">stuff that I want to move</div>
</li>
<li><a href="" title="Tall Glow"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a>
<div class="This_is_hidden">stuff that I want to move</div>
</li>
<li><a href="" title="Tall Glow"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a>
<div class="This_is_hidden">stuff that I want to move</div>
</li>
</ul>
</div>
<div class="other">
want to put the div here
</div>

どんな助けでもいただければ幸いです。

4

2 に答える 2

1

移動したアンカーに一時クラスを割り当てます。次に、を実行するときにmouseout、一時クラスを持つ要素を要素に追加し、一時クラスを削除します。

mouseoutイベントは常にイベントの前に発生するためmouseover、すべての要素を処理するには、1つの一意の一時クラス名で十分です。

$('.wrapper li').mouseover(function() {
    $(this).children('.This_is_hidden').appendTo(".other").css('display', 'block' )
       .addClass('magic-happens-here');
}).mouseout(function() {
    $('.magic-happens-here').appendTo(this).removeClass('magic-happens-here');
});
于 2012-02-02T21:50:38.543 に答える
0

この問題のより良い解決策はhover()、Enter＆Leave関数を処理するように設計された専用のjQuery関数を利用し、HTML5でコーディングを提供し、新しいデータを利用することです-*カスタム属性を使用して「ツールチップ」コンテンツ。

まず、上で述べたように、次のように関数をラッパーリストアイテムにバインドhover()します。

$('.wrapper li').hover(function() {

    // This handles the mouse enter function

}, function() {

    // And this handles the mouse leave function

});

hover()関数の完全なドキュメントは、jQueryAPIサイトにあります。

次に、HTMLマークアップで、次の行に沿って何かを追加することにより、data- *属性を利用します：data-tooltip-content=""リストアイテム内のアンカーに-これは次のようになります：

<div class="wrapper">
    <ul>
        <li><a href="#" title="Tall Glow" data-tooltip-content="Stuff that I want to show for thumb 1"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a></li>
        <li><a href="#" title="Tall Glow" data-tooltip-content="Stuff that I want to show for thumb 2"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a></li>
        <li><a href="#" title="Tall Glow" data-tooltip-content="Stuff that I want to show for thumb 3"><img src="images/thumb1.jpg" height="80" width="80" alt="Tall Glow" /></a></li>
    </ul>
</div>

新しいデータをサポートするドキュメント-*カスタム属性は、このhtml5doctorWebサイトにあります。

2つのハンドラーの間にjQuery関数を追加して、ツールチップのコンテンツを表示する新しい要素をWebサイトに追加できるようになりました。これはjQuery関数を使用して実行できますが、DOMを使用してアクセスする前に、この要素をページに追加する必要があります。これは、ページに追加およびページから削除する方法です。

$('.wrapper li').hover(function() {

    // Create a new division element to contain the tooltip content
    $('<div />')

    // Add required attributes to the new element
    .attr({

        // Assign an ID so we can remove this element later
        id : 'fly-tooltip',

        // Assign a class to the new element for styling
        class : 'tooltip'

    })

    // Insert the text from the current list item's data- attribute
    .text( $(this).children('a').attr('data-tooltip-content') )

    // Finally, append the new element to the page's body
    .appendTo('body');

}, function() {

    // Now call the jQuery function to remove the tooltip using the ID
    $('#fly-tooltip').remove();

});

クラスを使用してツールチップをカスタマイズし、それに応じて配置できるようになりました。新しい要素を本文に追加する代わりに、ページの特定の場所に追加することもできます.appendTo('.wrapper')。

上で説明したコードを使用してこのJSfiddleを確認してください。見やすくするために、少しスタイルを追加しました。お役に立てれば。

于 2012-02-02T23:27:01.070 に答える