令人困惑的鼠标移出行为答案

【问题标题】：confusing mouseout behavior令人困惑的鼠标移出行为
【发布时间】：2012-12-10 15:15:41
【问题描述】：

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

注意当这一行$(this).css('display','none');被注释掉的行为就像我期望的那样，当鼠标移入和移出列表时背景会改变颜色。

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

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

谢谢，

苹果机

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

【问题讨论】：

这是你的吗？ jsfiddle.net/bTh3A/2
我对你的 jQuery 和 HTML 做了一些更正（一些缺少的分号和你最后的 </li> 标记搞砸了）

标签： jquery mouseout

【解决方案1】：

问题是当你hideul 没有可以触发mouseover 的区域。因此，您需要按住该区域以获得鼠标悬停。我在一个 div 中添加了 ul，该 div 具有一些宽度和高度，当 ul 隐藏并与此父 div 绑定事件时会保留这些宽度和高度。

Live Demo

HTML

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

Javascript

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

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

})

【讨论】：

【解决方案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

【讨论】：

你的接受率是 0% ...开始接受你的问题的答案..这样你以后可以从其他人那里得到帮助.. :)..meta.stackexchange.com/questions/5234/…...干杯.. :)

【解决方案3】：

你想为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/

【讨论】：

嘿，这是从他原来的问题中复制而来的，现在修复了:)