Javascript 工具提示父项淡入淡出-不打算淡出

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

问题是，fadeIn和fadeOut的选择器针对的是整个项目，而不是类“工具提示范围”的范围。我相信是这样的，因为当鼠标离开

元素时，整个
都会消失。当鼠标进入时，会显示
，但我相信如果
也被隐藏，它也会消失

在选择孩子的过程中，我做错了什么

我将使用：

display: none;

在另一个班级：

display: block !important;

在CSS中，但我需要一个淡入淡出时间，这是使用
display
属性无法实现的。
我仍然无法解决它，因此我将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" );
});

我相信您希望在父级li悬停时显示span with class工具提示span，class给出工具提示

如果我理解正确，您可以用以下代码替换代码

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

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