jquery - 令人困惑的鼠标移开行为-6ren

jquery - 令人困惑的鼠标移开行为

转载作者：行者123 更新时间：2023-12-01 05:57:29

25

4

给定以下无序列表，我希望该列表在鼠标移出事件时消失。

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

但是，当我取消注释该行时，我希望 UL 会在鼠标悬停事件中消失。相反，一旦鼠标移入列表，它就会消失。

我已经花了六个小时了。我缺少什么？

谢谢

苹果机

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

最佳答案

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

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

})

关于jquery - 令人困惑的鼠标移开行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14017281/

25

4

0

文章推荐： python - Django KeyError {% if in %}

文章推荐： react-native - Apollo Refetch() 后组件 `props.data` 不会重新加载

文章推荐： python - 尝试连接时出现 SMTP python 跟踪错误

android - 如何将注意力从 EditText 移开？
在我的应用程序中，当 EditText 失去焦点时，我需要做一些事情。编辑 EditText 时，我不能让它失去焦点。在 Windows Phone 中有 this.Focus();方法，但在 and
android - Android 拖影的 'target point' 如何从它的 'touch point' 移开？
我正在开发一个应用程序，该应用程序可以更精确地控制拖动对象的放置位置。但是对于电容式触摸屏，用户的手指总是会遮住放置目标。 Android 允许通过覆盖 View.DragShadowBuilder.

首页

博学

6Ren·AI

商城

jquery - 令人困惑的鼠标移开行为