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 );
            });
        }
    }

});

}

问题是，淡入和淡出的选择器是针对整个项目，而不是类“工具提示跨度”的跨度。我相信是这样的，因为当鼠标离开<li>元素时，整个元素就<li>消失了。当鼠标进入时<span>显示出来，但我相信如果<li>它也被隐藏它也会淡入。

我在选择孩子时做错了什么？

我会使用：

display: none;

在另一个班级：

display: block !important;

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

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

我相信您想在父 li 悬停时显示带有类tooltip-span 的跨度，带有类give-tooltip

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

$('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 回答