2

鉴于以下无序列表，我希望该列表在 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>
4

3 回答 3

0

您想li为 css 修改选择单个标签，如下所示：

$('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/

于 2012-12-24T05:08:02.640 回答
0

这里的问题是你的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

于 2012-12-24T05:12:12.700 回答
0

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

现场演示

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();

})​
于 2012-12-24T05:17:07.473 回答