0

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

任何帮助，将不胜感激。

4

2 回答 2

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');
});
于 2012-02-02T21:50:38.543 回答
0

一个更好的解决这个问题的方法是使用专门设计的 jQueryhover()函数，该函数旨在处理进入和离开函数，并在 HTML5 中提供您的编码，利用新的 data-* 自定义属性来包含您的“工具提示”内容。

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

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

    // This handles the mouse enter function

}, function() {

    // And this handles the mouse leave function

});

您可以在 jQuery API 站点上找到该hover()函数的完整文档。

然后在您的 HTML 标记中，通过向data-tooltip-content=""列表项中的锚点添加以下内容来使用 data-* 属性 - 这看起来像：

<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').

用我上面解释过的代码查看这个 JSfiddle，我添加了一些样式以使事情更容易看到。希望这可以帮助。

于 2012-02-02T23:27:01.070 回答