Question

我对jquery很新，所以我遇到了一些问题。我正在尝试创建一个HTML，如果用户将鼠标悬停在div组件上，则会显示一个列表。但问题是，如果我移动我的鼠标悬停在div上然后列表出现并反复消失。谢谢你提前帮助我。

这是我的HTML代码： -

＆＃13;

$(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);

	});


});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

您需要使用mouseenter和mouseleave代替mouseover和mouseout

＆＃13;

$(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);

  });


});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

您还可以使用jQuery .hover()

提供的速记版本

$('div div').hover(function () {
    $('ul', this).stop().fadeIn();
}, function () {
    $('ul', this).stop().fadeOut();
});

＆＃13;

$(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);

  });


});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

您必须使用mouseenter和mouseleave功能。您可以尝试on方法

$('div div').on({
        mouseenter: function() {
            // Handle mouseenter...
        },
        mouseleave: function() {
            // Handle mouseleave...
        }
    });

您可以在jQuery On

获取有关on方法的更多信息

jquery hide（）/ show（）动画不断重复

2 个答案: