Show/Hide Div inside Div

**felipe.regalgo** · 11-22-2011, 01:18 PM

Hi,

When I pass the mouse over de image, it correctly show the icon/option (inside the this image), but when I try to click on this icon it show-off.
The code below is runnable for tests.

Thank for help

Code:

<html>
<head><script src="http://jqueryui.com/jquery-1.6.2.js" type="text/javascript"></script></head>
<body>
<div style="position: relative">

	<img src="http://irmaedviges.2toq.com/wp/wp-content/uploads/2010/09/Paisagens_446561914_paisagens_01-150x150.jpg" onmouseover="doOnmouseover()" onmouseout="doOnmouseout()">
	
	<div id="opcoes" style="position: absolute; top: 50px; left: 5px; display: none;">
		<a href="www.google.com.br" target="_blank">
			<img src="http://imagem.buscape.com.br/parceiros/rac/seta_esquerda.gif" >
		</a>
	</div>
	
</div>

<span id="xxx"></span>
<BR><span id="yyy"></span>

<script type="text/javascript">
	
	countIn = 1;
	countOut = 1;
	function doOnmouseover() {
		$('#opcoes').fadeIn(1000);
		$('#xxx').text('doOnmouseover: ' + countIn++);
	}
	
	function doOnmouseout() {
		$('#opcoes').fadeOut(1000);
		$('#yyy').text('doOnmouseout: ' + countOut++);
	}
</script>

</body>
</html>

**ggalan** · 11-22-2011, 03:10 PM

what do you want to happen when you click?

**felipe.regalgo** · 11-22-2011, 05:31 PM

the problem is that icon disaper (fadeOut/hide) when I put the mouse over it... I wanna this icon only fadeOut where the mouse go out the main image

**ggalan** · 11-23-2011, 02:29 PM

since you have jQuery already

Code:

<html>
<head>
<style>
#pic {width:150px;}
#opcoes {position: absolute; top: 50px; left: 5px; display:none; }
</style>
	
<script src="http://code.jquery.com/jquery.min.js"></script>
</head>
<body>
	
<div id="pic">
	<img src="http://irmaedviges.2toq.com/wp/wp-content/uploads/2010/09/Paisagens_446561914_paisagens_01-150x150.jpg">
	<span id="opcoes">
		<a href="www.google.com.br" target="_blank">
			<img src="http://imagem.buscape.com.br/parceiros/rac/seta_esquerda.gif" >
		</a>
	</span>
</div>

<span id="xxx"></span>
<BR><span id="yyy"></span>

<script type="text/javascript">
$(function() {	
	$('#pic').mouseenter(function(){
		$(this).find('span#opcoes').fadeIn(200);
	});
	
	$('#pic').mouseleave(function() {
		$(this).find('span#opcoes').fadeOut(200);
	});
});
</script>

</body>
</html>

**felipe.regalgo** · 11-24-2011, 01:29 AM

Excelent!!! It works thanks

Thread: Show/Hide Div inside Div

Thread Tools

Search Thread

Show/Hide Div inside Div

Bookmarks

Bookmarks

Posting Permissions