Question

我对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;

在CSS中，但我需要一个淡入淡出时间，这是display属性无法实现的。

Answer 1

我仍然无法解决这个问题所以我将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" );
});

Answer 2

我相信您希望在使用类 give-tooltip

的父级li悬停时显示类 tooltip-span 的范围

如果我理解正确，您可以使用以下

替换您的代码

$('li.give-tooltip').hover(
   function(){
               $(this).find('span.tooltip-span').fadeIn(400);
             },
   function(){
               $(this).find('span.tooltip-span').fadeOut(400);
             }
);

ToolTip Parent Fading On .fadeOut - Not Meant To

2 个答案: