Question

我问一个与this one非常相似的问题 - 我敢说相同吗？

示例目前位于底部导航on this page。

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

目前，我有：

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

目前这种行为非常奇怪。有时它会等待三秒钟，有时会等待一秒钟，有时它不会完全淡出。

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

想想任何人都可以帮助我完成这个过程，并准确了解计时器的定时器和清除工作是如何工作的？

非常感谢Stack Overflow。当我走这条学习互联网的道路时，你们一直都很不可思议。

Answer 1

如果您只想让它正常运行，您可以尝试使用this one之类的工具提示插件。

如果你想了解应该如何做到这一点：首先，摆脱超时，让它在没有它的情况下工作。差异（从用户的角度来看）非常小，它简化了内容（开发和调试）。在你按照你想要的方式工作之后，把暂停时间放回去。

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

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

据我所知，如果鼠标移出导航器，您确实希望下拉列表消失，除非它移动到下拉列表本身。这有点复杂，但这里是如何做到的：在两种类型的项目鼠标输出事件，你设置一个调用隐藏下拉列表的函数的计时器。让我们说计时器是1秒钟。对于这两种项目鼠标，你清除此计时器（请参阅w3school page on timing了解语法等）。另外，在导航器的鼠标中，你必须显示下拉列表。

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

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

3 个答案: