我正在尝试做一些应该非常简单的事情,但它导致了这个奇怪的问题。基本上我在一个页面上有一堆相同的 div,每个 div 都有一个嵌套的 div 和该嵌套 div 中的段落内容。嵌套的 div 及其所有内容最初是使用 css 隐藏的。当用户将鼠标悬停在主 div 上时,嵌套 div 及其所有内容都会淡入 View 。
到目前为止这部分工作正常...
现在,当用户的鼠标离开 div 时,嵌套的 div 将再次隐藏。问题是,当您在各个 div 上快速地来回移动鼠标时,某些嵌套的 div 会停止消失,但仍保留在 View 中。怎么解决这个问题?
这是我试图实现的效果的示例,无需复制他们的代码:)
http://www.crackpixels.com/
这是我的代码,您可以按原样运行它,所有内容都是绝对链接的:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
// when user hovers over box
$('.box').mouseover(function() {
$(this).children('div').fadeIn('fast');
});
// when user's mouse leaves box
$('.box').mouseleave(function() {
$(this).children('div').hide();
});
});
</script>
<style>
.box {
padding: 5px;
float: left;
margin-bottom: 20px;
border: 1px solid #ccc;
background: #F5F5F5;
margin: 0 10px 0;
}
.box div {
display: none; /* hide initially */
position: absolute;
width: 288px;
height: 175px;
margin: -175px 0 0;
background: #444;
color: #fff;
}
</style>
<div class="box">
<img src="http://www.google.com/images/logos/ps_logo2.png" height="175" width="288" />
<div>
<p>
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo
</p>
</div>
</div><!-- box -->
<div class="box">
<img src="http://www.google.com/images/logos/ps_logo2.png" height="175" width="288" />
<div>
<p>
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo
</p>
</div>
</div><!-- box -->
<div class="box">
<img src="http://www.google.com/images/logos/ps_logo2.png" height="175" width="288" />
<div>
<p>
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo
</p>
</div>
</div><!-- box -->
<div class="box">
<img src="http://www.google.com/images/logos/ps_logo2.png" height="175" width="288" />
<div>
<p>
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo
</p>
</div>
</div><!-- box -->
<div class="box">
<img src="http://www.google.com/images/logos/ps_logo2.png" height="175" width="288" />
<div>
<p>
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo<br />
Hello world foo bar foo
</p>
</div>
</div><!-- box -->
最佳答案
使用mouseenter
而不是mouseover
。
关于javascript - 如何解决这个烦人的 jQuery 鼠标悬停问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5614919/