0

私はJavascipt/Jqueryに少し慣れていません（私はそれについて長い間知っていましたが、実際にいじり始めただけです）。

次のマークアップ用の簡単なツールチップ関数を作成しようとしています。

<ul class="exec-List">
    <li class="give-tooltip">
        <img src="test.png" /> 

            <span title="Loloscoped" class="tooltip-span">Content</span>

    </li>
    <li>
         <img src="test.png" /> 

            <span title="Loloscoped" class="tooltip-span">Content</span>

   </li>
</ul>

これが私がこれまでに持っているものです：

function simple_tooltip( target_items, target_class, give_class )
{

$( target_items ).each(function( i )
{       

    var current_item = $(this);

    if( current_item.hasClass( 'give-tooltip' ) )
    {
        alert( 'has tooltip class' );   

        var current_child = current_item.children(this);

        if( current_child.hasClass( 'tooltip-span' ))
        {
            current_item.mouseenter(function()
            {
                current_child.fadeIn( 400 );
            });
            current_item.mouseleave(function()
            {
                current_child.fadeOut( 400 );
            });
        }
    }

});

}

問題は、fadeInとfadeOutのセレクターが、クラス「tooltip-span」のスパンではなく、アイテム全体をターゲットにしていることです。<li>マウスが要素を離れると、全体<li>が消えていくので、これが当てはまると思います。マウスが入る<span>と明らかになりますが、<li>隠されていればフェードインすると思います。

子供を選択しようとして私は何を間違っていますか？

私は使用します：

display: none;

そして別のクラスでは：

display: block !important;

displayCSSでは、フェードタイムが必要ですが、これはプロパティでは実現できません。

4

2 に答える 2

0

それでも解決できなかったので、JSを変更して、親から子ではなく、子から親に機能するようにしました。

動作するコードは次のとおりです。

function tooltip( target_tag, parent_class, tooltip_class )
{

$( target_tag ).each(function()
{
        var current_item = $(this);
        var current_parent = current_item.parent(this);
        if( ( current_parent.get(0).tagName == 'LI' ) && ( current_parent.hasClass( parent_class ) ) )
        {
            current_parent.mouseenter(function()
            {
                current_item.fadeIn( 400 );
            }).mouseleave(function()
            {
                current_item.fadeOut( 400 );
            });
        }
});

}


$(document).ready(function()
{
     tooltip( "span", "give-tooltip", "tooltip-span" );
});
于 2013-02-05T14:35:19.203 に答える
0

クラスtooltipでスパンを表示したいと思います-クラスgive-tooltipで親liのホバーにスパン

私が正しいと理解している場合は、コードを次のように置き換えることができます

$('li.give-tooltip').hover(
   function(){
               $(this).find('span.tooltip-span').fadeIn(400);
             },
   function(){
               $(this).find('span.tooltip-span').fadeOut(400);
             }
);
于 2013-02-05T14:51:17.423 に答える