gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 05:57:29 25 4
gpt4 key购买 nike

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

请注意,当这一行$(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
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com