CODEWITHSUNDEEP
javascriptjqueryhtmlcsshover
confused5000
confused5000

Reputation: 59

How to get a hidden div to stay visible when hovered over with jQuery?

I have a confusing issue. When my first div "leftbox" is hovered over, "rightbox" (the hidden div) displays, but it eventually disappears when "leftbox" is not hovered over. But I need "rightbox" to stay visible when rightbox is hovered over, then when the user's mouse leaves rightbox, then it should disappear. How can I get this to work? I'd really appreciate the help.

Upvotes: 0

Views: 46

Answers (1)

Neil
Neil

Reputation: 14321

If you add a container class it works fine.

$(function(){
	$('.container').hover(function(){
		var boxId = $(this).find("[data-id]").attr('data-id');
		$('#'+boxId).stop().fadeToggle();
	});
});
.leftbox {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	float: left;
}
.rightbox {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	background: #99bf8f;
	margin-left: 110px;
	display: none;
}
.container {
  float:left;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="test.css">
</head>

<body>

<div class="container">
  <div class="leftbox" data-id="functionbox1"></div>
  <div class="rightbox" id="functionbox1"></div>
</div>

<script src="test.js"></script> 			
</body>
</html>

Upvotes: 1

Related Questions