Jquery追加到某处，然后将其移回

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 事件始终发生在 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() 函数，该函数旨在处理 Enter & 。保留函数，并在 HTML5 中提供编码，利用新的 data-* 自定义属性来包含“工具提示”内容。

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

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

    // This handles the mouse enter function

}, function() {

    // And this handles the mouse leave function

});

您可以找到 hover() 函数的完整文档 < a href="http://api.jquery.com/hover/" rel="nofollow">位于 jQuery API 站点。

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

支持新 data-* 自定义属性的文档可以在此 html5doctor 网站 上找到。

现在，您可以在两个处理程序之间添加更多 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 ，我添加了一些样式来制作东西更容易看到。希望这有帮助。