我对 jquery 很陌生，所以我面临一些问题。我正在尝试创建一个 HTML，其中如果用户将鼠标悬停在 div 组件上，则会显示一个列表。但问题是，如果我移动我的将鼠标悬停在 div 上，然后列表会反复出现和消失。感谢您提前帮助我。
这是我的 html 代码:-
$(function(){
var det={
firstname:'Gunjan',
lastname:'Dutta Bhowmick'
};
$('ul').hide();
$('ul').css({
'background-color':'blue',
'border':'2px solid green'
});
$('li').css({
'color':'red'
});
$('div div').mouseover(function(){
var id ='#'+$(this).attr('id')+' ul';
$(id).fadeIn();
}).mouseout(function(){
var id ='#'+$(this).attr('id')+' ul';
$(id).fadeOut();
});
$('html').dblclick(function(){
alert(det.firstname+" "+det.lastname);
});
});.features{
width: 1200px;
height: 90px;
margin-top:5px;
}
#Hobbs{
width: 300px;
height: 90px;
background: green;
display: inline-block;
position:absolute;
top: 10px;
}
#Lang{
width: 300px;
height: 90px;
background: red;
display: inline-block;
position:absolute;
top: 10px;
left:310px;
}
#Fri{
width: 300px;
height: 90px;
background: yellow;
display: inline-block;
position:absolute;
top: 10px;
left:610px;
}
li{
color: green;
width: 300px;
display: inline-block;
}
p{
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<head>
<title>SimpleNav</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script src="../jquery-1.6.3.min.js"></script>
<script src="main.js" ></script>
</head>
<body>
<div class="features">
<div id="Hobbs">
<p>Hobbies</p>
<ul class="hlist">
<li>Programming</li>
<li>Playing Games</li>
<li>Listening Music</li>
<li>Playing Outdoor Games</li>
</ul>
</div>
<div id="Lang">
<p>Language</p>
<ul class="llist">
<li>JAVA</li>
<li>C</li>
<li>JAVASCRIPT</li>
<li>HTML</li>
<li>JQUERY</li>
<li>CSS</li>
</ul>
</div>
<div id="Fri">
<p>Friends</p>
<ul class="frlist">
<li>Rohan</li>
<li>Prithwish</li>
<li>Souparna</li>
<li>Priyo</li>
<li>Sayantan</li>
</ul>
</div>
</div>
</body>最佳答案
您需要使用mouseenter和 mouseleave而不是mouseover和 mouseout
$(function() {
var det = {
firstname: 'Gunjan',
lastname: 'Dutta Bhowmick'
};
$('ul').hide();
$('ul').css({
'background-color': 'blue',
'border': '2px solid green'
});
$('li').css({
'color': 'red'
});
$('div div').mouseenter(function() {
$('ul', this).stop().fadeIn();
}).mouseleave(function() {
$('ul', this).stop().fadeOut();
});
$('html').dblclick(function() {
alert(det.firstname + " " + det.lastname);
});
});.features {
width: 1200px;
height: 90px;
margin-top: 5px;
}
#Hobbs {
width: 300px;
height: 90px;
background: green;
display: inline-block;
position: absolute;
top: 10px;
}
#Lang {
width: 300px;
height: 90px;
background: red;
display: inline-block;
position: absolute;
top: 10px;
left: 310px;
}
#Fri {
width: 300px;
height: 90px;
background: yellow;
display: inline-block;
position: absolute;
top: 10px;
left: 610px;
}
li {
color: green;
width: 300px;
display: inline-block;
}
p {
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<div class="features">
<div id="Hobbs">
<p>Hobbies</p>
<ul class="hlist">
<li>Programming</li>
<li>Playing Games</li>
<li>Listening Music</li>
<li>Playing Outdoor Games</li>
</ul>
</div>
<div id="Lang">
<p>Language</p>
<ul class="llist">
<li>JAVA</li>
<li>C</li>
<li>JAVASCRIPT</li>
<li>HTML</li>
<li>JQUERY</li>
<li>CSS</li>
</ul>
</div>
<div id="Fri">
<p>Friends</p>
<ul class="frlist">
<li>Rohan</li>
<li>Prithwish</li>
<li>Souparna</li>
<li>Priyo</li>
<li>Sayantan</li>
</ul>
</div>
</div>您还可以使用 jQuery .hover() 提供的简写版本
$('div div').hover(function () {
$('ul', this).stop().fadeIn();
}, function () {
$('ul', this).stop().fadeOut();
});
$(function() {
var det = {
firstname: 'Gunjan',
lastname: 'Dutta Bhowmick'
};
$('ul').hide();
$('ul').css({
'background-color': 'blue',
'border': '2px solid green'
});
$('li').css({
'color': 'red'
});
$('div div').hover(function() {
$('ul', this).stop().fadeIn();
}, function() {
$('ul', this).stop().fadeOut();
});
$('html').dblclick(function() {
alert(det.firstname + " " + det.lastname);
});
});.features {
width: 1200px;
height: 90px;
margin-top: 5px;
}
#Hobbs {
width: 300px;
height: 90px;
background: green;
display: inline-block;
position: absolute;
top: 10px;
}
#Lang {
width: 300px;
height: 90px;
background: red;
display: inline-block;
position: absolute;
top: 10px;
left: 310px;
}
#Fri {
width: 300px;
height: 90px;
background: yellow;
display: inline-block;
position: absolute;
top: 10px;
left: 610px;
}
li {
color: green;
width: 300px;
display: inline-block;
}
p {
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<div class="features">
<div id="Hobbs">
<p>Hobbies</p>
<ul class="hlist">
<li>Programming</li>
<li>Playing Games</li>
<li>Listening Music</li>
<li>Playing Outdoor Games</li>
</ul>
</div>
<div id="Lang">
<p>Language</p>
<ul class="llist">
<li>JAVA</li>
<li>C</li>
<li>JAVASCRIPT</li>
<li>HTML</li>
<li>JQUERY</li>
<li>CSS</li>
</ul>
</div>
<div id="Fri">
<p>Friends</p>
<ul class="frlist">
<li>Rohan</li>
<li>Prithwish</li>
<li>Souparna</li>
<li>Priyo</li>
<li>Sayantan</li>
</ul>
</div>
</div>关于javascript - jquery hide()/show() 动画连续重复，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30542455/