Question

我有以下html：

<div class="guide-block" id="energy_guide">
    <div class="guide-block-inner">
        <div class="guide-block-head">
            <a class="guide-block-link" href="#">
                <h3 class="guide-block-title">Guides</h3>
            </a>
        </div>

        <div class="guide-block-image">
            <div class="guide-block-image-inner" id="energy_guide">
                <img src="images/Energy-Saving-Bulb-01.png" alt="Guide">
            </div>
        </div>

        <div class="guide-block-more">
            <ul class="guide-block-list us-list" id="energy_guide">
                <li><a href="#">News</a></li>
                <li><a href="#">Guides</a></li>
            </ul>
        </div>
    </div>
</div>

以及以下js：

$( "#energy_guide" ).mouseenter(function() 
{
    $(".guide-block-image #energy_guide")
    .fadeOut("fast", function() 
    {
        $(".featured_news .guide-block-inner .guide-block-more #energy_guide")
         .fadeIn("fast");
    });
});

$( "#energy_guide" ).mouseleave(function() 
{
    $(".featured_news .guide-block-inner .guide-block-more #energy_guide")
    .fadeOut("fast", function () 
    {
        $(".guide-block-image #energy_guide")
         .fadeIn("fast");
    });

});

默认情况下，列表在css中隐藏，我想要实现的是在将鼠标悬停在整个guide-block div上时用列表替换图像。一切都很好，花花公子，直到你移动鼠标太快，鼠标离开功能由于某种原因没有触发。

Answer 1

第一个让我感到惊讶的想法是，实际上你的事件完全没问题，而是jQuery构建 Animations 并在队列中构建它们的方式。

一个可能的解决方法是.stop()你的后续动画（动画。构建），所以整体代码可能如下所示：

$( "#energy_guide" ).hover(function() {
    $(this).stop().fadeToggle();
});

（如果没有看到使用CSS编写代码的演示，那么有点难以猜测，但是你去了）

您使用选择器的方式是错误的：

.featured_news .guide-block-inner .guide-block-more #energy_guide

jQuery将仅选择#energy_guide，并考虑到它是您文档中唯一的ID（因为它应该是），不需要使用父 Class 选择器。

快速移动鼠标不会触发mouseleave

1 个答案: