Question

鉴于以下无序列表，我希望列表在mouseout事件中消失。

请注意，此行 $（this）.css（'display'，'none'）;当鼠标移入和移出列表时，行为就像我预期的那样，背景会改变颜色。

然而，当我取消注释该行时，我希望UL在 mouseout 事件中消失。相反，只要将鼠标移动到列表中，它就会消失。

我已经在这里待了六个小时。我错过了什么？

谢谢，

Mac

    <style type="text/css">

    * {
        color: navy;
        font-family: arial;
        font-size: 18px;
    }

    ul, li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    ul#member {
        position: absolute;
        left: 10px;
        top: 0px;
        //clear: left;
        border: 1px solid red;
        padding: 4px;
        margin-left: 10px;
        margin-top: 10px;
        display: block;
        line-height:1.5;
    }
    </style>

    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script>
    $(document).ready(function() {
    //alert ('jQuery Is Alive and Well');

     $('ul#member').mouseover (function() {
          $(this).css('background-color','silver');
        });

     $('ul#member').mouseout (function(){
            $(this).css('background-color','gray');
           // $(this).css ('display','none');

        });
    }); //end of document ready
    </script>
    </head>
<body>
    <ul id='member'>
       <li>Change Villages ID#</li>
       <li>Change Address</li>
       <li>Changes Phone Numbers</li>
       <li>Change Name</li>
    </ul> 
</body>
</html>

Answer 1

您想为css修改选择单独的li标记，如下所示：

$('ul#member li')

<ul id='member'>
    <li>Change Villages ID#</li>
    <li>Change Address</li>
    <li>Changes Phone Numbers</li>
    <li>Change Name</li>
</ul>

http://jsfiddle.net/bTh3A/6/

Answer 2

问题在于您的mouseover()\mouseout()功能

`mouseover` fires when the pointer moves into the child element as well (li).

使用mouseenter() \ mouseleave()

`mouseenter` fires only when the pointer moves into the bound element.

或

use `hover()`

这是可以帮助您理解这个
的正确链接
http://www.bennadel.com/blog/1805-jQuery-Events-MouseOver-MouseOut-vs-MouseEnter-MouseLeave.htm

Answer 3

问题是当hide ul时，mouseover没有可以触发<div id="divId" style="widht:200px; height:200px;"> <ul id='member'> <li>Change Villages ID#</li> <li>Change Address</li> <li>Changes Phone Numbers</li> <li>Change Name</</li> </ul> </div>的区域。所以你需要保持区域以获得鼠标悬停。我在div中添加了ul，它有一些宽度和高度，当ul得到隐藏和绑定事件时，这个父div保留。

<强> Live Demo

HTML 的

$('#divId').mouseover (function() {
   // $('ul#member').css('background-color', 'silver');
    $('ul#member').show();
})

$('#divId').mouseout(function() {
   // $('ul#member').css('background-color', 'gray');
    $('ul#member').hide();

})

的Javascript

{{1}}

令人困惑的mouseout行为

3 个答案: