Log in

View Full Version : 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





<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


<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