Question

这是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>

现在它是如何运作的：

当我将鼠标悬停在“0X项目”时，“列表”应该在按钮“项目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");

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

错误：语法错误，无法识别的表达式：unsupported pseudo：悬停

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

Answer 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。

当鼠标悬停在特定div上时，如何使mouseleave功能停止

1 个答案: