Question

我有一些工具提示，我遇到了麻烦。我在列表项中有一个隐藏的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

}

});

这是马克托：

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

任何帮助都将不胜感激。

Answer 1

为移动的锚点分配临时类。然后，当您mouseout时，将带有临时类的元素添加到元素中，并删除临时类。

因为mouseout事件总是发生在mouseover事件之前，所以一个唯一的临时类名就足以处理所有元素。

$('.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');
});

Answer 2

这个问题的一个更好的解决方案是利用目的jQuery hover()函数，该函数用于处理输入和输出。保留函数，并在HTML5中提供编码，利用新数据 - *自定义属性来包含“工具提示”内容。

首先，正如我上面提到的，将hover()函数绑定到包装器列表项，如下所示：

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

    // This handles the mouse enter function

}, function() {

    // And this handles the mouse leave function

});

您可以找到hover()函数here on the jQuery API site的完整文档。

然后在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>

可在此html5doctor website上找到支持新数据* *自定义属性的文档。

现在，您可以在两个处理程序之间添加更多jQuery函数，以向网站添加新元素以显示工具提示内容。这可以通过使用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')。

使用我上面解释的代码查看this JSfiddle，我添加了一些样式以便于查看。希望这会有所帮助。

Jquery追加到某个地方，然后将其移回

2 个答案: