Show div from parent on hover with jQuery

Question

Im still learning jQuery and I'm having a little trouble working out what i need to do... I need to have markers on a map and when you roll over them they show information. So I have two problems I'm not sure of:

1) How do you make the div hide again when the hover is released? 2) How do I write the code so that the div of parent is the only one that opens rather than all of them?

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

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

Answer 1

Use childern() method.The children() method returns all direct children of the selected element.Define two function for hover() method.The hover() method specifies two functions to run when the mouse pointer hovers over the selected elements.This method triggers both the mouseenter and mouseleave events.

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

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

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

See fiddle here JS Fiddle

Answer 2

Use toggle rather then show and find popup inside associate div .

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