当鼠标移动到子元素时，如何显示内容并保持其可见性？

Question

我问的问题与这个非常相似——我敢说相同吗？

目前，此页面的底部导航中提供了一个示例。

我希望当用户将鼠标悬停在各自的图标上时显示下一页和上一页的名称和链接。我很确定我的解决方案将需要绑定或计时器，目前我似乎不太理解这两者。

目前，我有：

$(document).ready(function() {  

var dropdown = $('span.hide_me');
var navigator = $('a.paginate_link');

dropdown.hide();

$(navigator).hover(function(){
    $(this).siblings(dropdown).fadeIn();
}, function(){
    setTimeout(function(){
        dropdown.fadeOut();
    }, 3000);
});
}); 

及其各自的 HTML（包括一些 ExpressionEngine 代码 - 抱歉）：

        <p class="older_entry"><a href="{path='blog/'}" class="paginate_link page_back">Older</a><span class="hide_me">Older entry: 
        <br />
        <a href="{path='blog/'}" class="entry_text">{title}</a></span></p>

        {/exp:weblog:next_entry} 

        <p class="blog_home"><a href="http://joshuacody.net/blog" class="paginate_link page_home">Blog Main</a><span class="hide_me">Back to the blog</span></p>

        {exp:weblog:prev_entry weblog="blog"}

        <p class="newer_entry"><a href="{path='blog/'}" class="paginate_link page_forward">Newer</a><span class="hide_me">Newer entry: 
        <br />
        <a href="{path='blog/'}" class="entry_text">{title}</a></span></p>

目前的行为非常奇怪。有时它会等待三秒，有时会等待一秒，有时它不会完全消失。

本质上，我希望在图标悬停时淡入“span.hide_me”（“a.paginate_link”），并且我希望当用户将鼠标悬停在跨度上时它保持可见。

认为有人可以帮助我完成这个过程并准确理解计时器和计时器清除是如何工作的吗？

非常感谢，堆栈溢出。当我走上这条学习互联网的道路时，你们真是太棒了。

Answer 1

如果您只是想让它正常工作，您可以尝试使用工具提示插件，例如这个 。

如果您想了解应该如何完成此操作：首先，摆脱超时，并使其在没有超时的情况下正常工作。差异（从用户的角度来看）非常小，并且它简化了事情（开发和调试）。当你让它按照你想要的方式工作后，重新设置超时。

现在，问题是你并不想隐藏导航器鼠标移出事件上显示的元素。您想将其隐藏在其自己的鼠标移出事件中。因此，我认为您可以将第一个参数传递给导航器悬停函数，然后将另一个悬停添加到下拉列表中，该悬停函数将有一个空函数作为第一个参数，并在第二个参数中隐藏代码。

编辑（根据您对 stefpet 的回答的回复）

我理解，如果鼠标移出导航器，您确实希望下拉菜单消失，除非它移动到下拉菜单本身。这有点复杂，但它是如何完成的：在两种类型的鼠标移出事件上，您设置一个计时器来调用隐藏下拉列表的函数。假设计时器为 1 秒。即使在这两种类型的项目鼠标上，您也清除此计时器（请参阅w3school 关于语法计时的页面，等等）。另外，在导航器的鼠标输入中，您必须显示下拉菜单。

Answer 2

代码中计时器的另一个问题是，它总是在鼠标移开时执行。由于 3 秒的延迟，当鼠标悬停时，您很可能会再次触发它，但由于计时器仍然存在，尽管您实际上将鼠标悬停在元素上，它也会淡出。

快速来回移动鼠标将触发多个计时器。

首先尝试让它在没有计时器的情况下工作，然后（如果确实需要）通过延迟添加额外的复杂性（您必须跟踪并根据状态删除/重置）。

Answer 3

这是最终的工作代码，供再次遇到此问题的任何人使用。如果我可以以任何方式改进它，请随时告诉我：

$(document).ready(function() {

var dropdown = $('span.hide_me');
var navigator = $('a.paginate_link');

dropdown.hide();

$(navigator).hover(function(){
    clearTimeout(emptyTimer);   
    $(this).siblings(dropdown).fadeIn();
}, function(){
    emptyTimer = setTimeout(function(){
        dropdown.fadeOut();
    }, 500);
});

$(dropdown).hover(function(){
    clearTimeout(emptyTimer);   
}, function(){
    emptyTimer = setTimeout(function(){
        dropdown.fadeOut();
    }, 500);
});
});