使用jQuery在hover上显示来自父级的div

Question

我还在学习jQuery，我在制作我需要做的事情时遇到了一些麻烦...我需要在地图上有标记，当你滚动它们时它们会显示信息。所以我有两个问题，我不确定：

1）当悬停被释放时，你如何让div再次隐藏？ 2）我如何编写代码，以便父元素的div是唯一打开而不是全部的代码？

＆＃13;

＆＃13;

$(function() {
$(".block").hover(function(){
	$('.popup').show();
	});
});

＆＃13;

	.wrapper {
		width: 800px;
		height: 600px;
		position: relative;
		background-color: #efefef;
		margin: 0 auto;
	} 

	.block {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		background-color: #8E2729;
		border:2px solid #fff;
		cursor: pointer;
	}
	
	.block:hover{
 		background-color: #5151B7;
	}
	
	.block-1 {
		position: absolute;
		top: 250px;
		left: 130px;
	}
	
	.block-2 {
		position: absolute;
		top: 60px;
		left: 500px;
	}
	
	.block-3 {
		position: absolute;
		top: 40px;
		left: 100px;
	}
	
	.popup {
		box-sizing: border-box;
		padding: 30px;
		background-color: #4E4E4E;
		display: none;
		width: 300px;
		position: absolute;
		top: 50px;
		left: -80px;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">

	<div class="block block-1">
		<div class="popup">This is some popup text for block 1</div>
	</div>
	
	<div class="block block-2">
		<div class="popup">This is some popup text for block 2</div>
	</div>
	
	<div class="block block-3">
		<div class="popup">This is some popup text for block 3</div>
	</div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用childern()方法。children()方法返回所选元素的所有直接子元素。为hover()方法定义两个函数。hover()方法指定要运行的两个函数当鼠标指针悬停在所选元素上时。此方法会触发mouseenter和mouseleave事件。

$(function() {
$(".block").hover(function(){
    $(this).children('.popup').show();
    },function(){
  $(this).children('.popup').hide();
  });
});

＆＃13;

＆＃13;

$(function() {
$(".block").hover(function(){
	$(this).children('.popup').show();
	},function(){
  $(this).children('.popup').hide();
  });
});

＆＃13;

.wrapper {
		width: 800px;
		height: 600px;
		position: relative;
		background-color: #efefef;
		margin: 0 auto;
	} 

	.block {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		background-color: #8E2729;
		border:2px solid #fff;
		cursor: pointer;
	}
	
	.block:hover{
 		background-color: #5151B7;
	}
	
	.block-1 {
		position: absolute;
		top: 250px;
		left: 130px;
	}
	
	.block-2 {
		position: absolute;
		top: 60px;
		left: 500px;
	}
	
	.block-3 {
		position: absolute;
		top: 40px;
		left: 100px;
	}
	
	.popup {
		box-sizing: border-box;
		padding: 30px;
		background-color: #4E4E4E;
		display: none;
		width: 300px;
		position: absolute;
		top: 50px;
		left: -80px;
	}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">

	<div class="block block-1">
		<div class="popup">This is some popup text for block 1</div>
	</div>
	
	<div class="block block-2">
		<div class="popup">This is some popup text for block 2</div>
	</div>
	
	<div class="block block-3">
		<div class="popup">This is some popup text for block 3</div>
	</div>

</div>

＆＃13;

＆＃13;

＆＃13;

请参见此处JS Fiddle

Answer 2

在关联div中使用toggle而不是show和find弹出窗口。

$(function() {
$(".block").hover(function(){
	$(this).find('.popup').toggle();
	});
});

	.wrapper {
		width: 800px;
		height: 600px;
		position: relative;
		background-color: #efefef;
		margin: 0 auto;
	} 

	.block {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		background-color: #8E2729;
		border:2px solid #fff;
		cursor: pointer;
	}
	
	.block:hover{
 		background-color: #5151B7;
	}
	
	.block-1 {
		position: absolute;
		top: 250px;
		left: 130px;
	}
	
	.block-2 {
		position: absolute;
		top: 60px;
		left: 500px;
	}
	
	.block-3 {
		position: absolute;
		top: 40px;
		left: 100px;
	}
	
	.popup {
		box-sizing: border-box;
		padding: 30px;
		background-color: #4E4E4E;
		display: none;
		width: 300px;
		position: absolute;
		top: 50px;
		left: -80px;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">

	<div class="block block-1">
		<div class="popup">This is some popup text for block 1</div>
	</div>
	
	<div class="block block-2">
		<div class="popup">This is some popup text for block 2</div>
	</div>
	
	<div class="block block-3">
		<div class="popup">This is some popup text for block 3</div>
	</div>

</div>