当鼠标悬停在特定的div时如何使mouseleave函数停止答案

【问题标题】：How to make mouseleave function stop when the mouse is hover a specific div当鼠标悬停在特定的div时如何使mouseleave函数停止
【发布时间】：2014-01-28 11:00:15
【问题描述】：

这是 HTML 代码：

<div class="item">item 01</div>
<div class="item">item 02</div>
<div class="item">item 03</div>
....

<div class="list">
   <ul>
       <li>store 1</li>
       <li>store 2</li>
       <li>store 3</li>
   </ul>
</div>

现在它是如何工作的：

当我将鼠标悬停在“item 0X”上时，“List”应该会显示在“item 0X”按钮旁边，这很好用。

问题是当我再次从列表返回到按钮时如何使列表保持可见。

我尝试使用此代码，但它不起作用

$(document).on({
        mouseenter: function () {
            var div = $(this);
            if( $('.list').css('display') == "none" )
            {
                actionHover(div);
            }
        },
        mouseleave: function () {
            setTimeout( function(){
                if( $(".list").is(':hover') )
                { 

                }
            else if( $(".item").is(':hover') )
            { 

            }
                else
                { 
                    $('.list').hide();
                }
            }, 100)
        }
    },".list, .item");

当鼠标从列表中退出时会出错：

错误：语法错误，无法识别的表达式：不支持的伪：悬停

http://jsfiddle.net/y2KcC/3/

【问题讨论】：

您多次使用 id "item"。 id 必须是唯一的！另外，根据您拥有的 jquery 版本， :hover 是错误的。只是谷歌，第一次点击：stackoverflow.com/questions/11998514/…
如果您只想在用户没有悬停在.list 或.item 上时隐藏.list，则取出整个setTimeout 部分并留下$('.list').hide(); -你的 mouseleave 已经被每个触发了。
Goose：你的答案是正确的，但这会产生一个小问题，当我从按钮粘贴到快速列出列表隐藏时，我需要非常快速地粘贴才能从隐藏中捕获列表...有什么想法吗？！
这是一个下拉菜单吗？或者列表会显示在页面的其他地方吗？每当您将鼠标移出指定元素时，mouseleave 函数就会触发 - 因此您很可能需要将这些元素放在父元素中并在父元素上触发鼠标事件。
这是一个将物品存储在特定商店中的列表。因此，当您显示项目列表并悬停某些项目时，该列表应该会显示为悬停项目选择商店。

标签： jquery mouseleave mouseout

【解决方案1】：

如果我正确理解您想要做什么，请尝试以下操作：

$(document).on({
    mouseenter: function () {
        $(this).children('.list').show();
    },
    mouseleave: function () {
        $(this).children('.list').hide();
    }
}, ".item");

这将要求您将列表作为.item 的子元素，并且将鼠标悬停在父.item 上/将显示/隐藏每个列表。

Here is a sample, with the markup also adjusted.

编辑

好的，我清理了您的代码并删除了 setTimeout 函数。之后，看起来您遇到的问题不是列表消失，而是一旦您将鼠标悬停在列表上，它就会再次尝试移动。我对其进行了调整，使其仅在您将鼠标悬停在 .item 元素上时才改变位置。如下图：

if ($(this).hasClass('item')) {
    $('.storeList').css({'left': (left + btn_wtd) , 'top': top });
}

这是updated fiddle。

【讨论】：

感谢 Goose，为什么我不将列表用作子项，因为“项目列表”的 div 父项有溢出：隐藏；因此，当您尝试为列表中的最后一项选择商店时，无法正确显示商店列表。在这里，当我得到“商店列表”时，通过这种方法，列表正确显示在“项目列表”框中
你能创建一个包含所有你的标记和样式的jsfiddle吗？我认为这将有助于我更好地理解。