2

次の順序付けられていないリストが与えられた場合、マウスアウト イベントでリストを非表示にします。

この行 $(this).css ('display','none') ; コメントアウトされていますが、マウスがリストに出入りすると背景の色が変わるという期待どおりの動作です。

ただし、その行のコメントを外すと、マウスアウトイベントで UL が消えることが予想されます。代わりに、マウスがリストに移動するとすぐに消えます。

私はこれで6時間過ごしました。私は何が欠けていますか？

ありがとう、

マック 

    <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

問題は、hideトリガーできるul領域がないことです。mouseoverしたがって、マウスオーバーを取得するために領域を保持する必要があります。ul がこの親 div で非表示およびバインドされたイベントを取得したときに保持される幅と高さを持つ div に ul を追加しました。

ライブデモ

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 に答える
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 に答える