Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Felipe Regalgo

[Resolvido] Erro - Efeito Div dentro de Div

Por , em Javascript

Recommended Posts

Felipe Regalgo    0

Felipe Regalgo
Postado

Ola,

 

Fiz uma funcionalidade q funciona da seguinte maneira: Quando passa o mouse por cima da imagem aparece (sobre essa imagem) um icone (opcao) permitindo q a pessoa possa clicar neste icone. Porém o meu problema é q quando a pessoa coloca o mouse em cima do icone ele some.

Estou colando a baixo um codigo q simula meu problema, basta rodar local ai da pra entender melhor o meu problema

 

Agradeço a ajuda

 

 

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

cara.. oq eu pensei foi o seguinte:

 

-> cria um container para a imagem e o ícone.

-> dispara os eventos onmouseover e onmouseout desse container, e não mais da imagem.

 

dessa forma, o icone e a imagem compartilharão o mesmo mouseover. Entendeu ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe Regalgo    0

Felipe Regalgo
Postado

entao... tentei passar os eventos para o div principal mas tb nao deu. Quando o mouse passa por cima da imagem chama o onmouseout do div pai

 

<div style="position: relative; width: 1%;" onmouseover="doOnmouseover()" onmouseout="doOnmouseout()">

<img src="http://irmaedviges.2toq.com/wp/wp-content/uploads/2010/09/Paisagens_446561914_paisagens_01-150x150.jpg" >

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

use o evento onmouseleave() e onmouseenter do jQuery.

 

assim você vai parar de usar js inline.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe Regalgo    0

Felipe Regalgo
Postado

opa, funcionou. Eu troquei para chamada de jquery e foi beleza.. mas qual a diferença? pq funcionou?

 

No final ficou assim: Valeu!!!

 

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

<img src="http://irmaedviges.2toq.com/wp/wp-content/uploads/2010/09/Paisagens_446561914_paisagens_01-150x150.jpg" >

<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 id="opcoes2" style="position: absolute; top: 80px; 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 id="opcoes3" style="position: absolute; top: 110px; 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">

count = 1;

$('#idDivPrincipal')
.mouseenter(function() {
	$('#opcoes').fadeIn(1000);
	$('#opcoes2').fadeIn(1000);
	$('#opcoes3').fadeIn(1000);
	$('#xxx').text('onmouseenter: ' + count++);
})
.mouseleave(function() {
	$('#opcoes').fadeOut(1000);
	$('#opcoes2').fadeOut(1000);
	$('#opcoes3').fadeOut(1000);
	$('#yyy').text('onmouseleave: ' + count++);
});

</script>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

A diferença, é que o mouseleave é disparado "menos vezes" q o mouseout.

 

Entrar em um filho, dispara o mouseout do pai, mas não dispara o mouseleave.

Basiscamente isso.

 

Agora, para otimizar teu script, aprenda sobre o objeto this

http://wbruno.com.br/blog/2011/06/21/afinal-e-javascript/

 

 

ai você não precisa desse monte de IDs, podendo usar classes, deixando o teu script mais simples.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe Regalgo    0

Felipe Regalgo
Postado

valeu pela explicacao! abs

 

<script type="text/javascript">

count = 1;

$('#idDivPrincipal')
.mouseenter(function() {
	$(this).find('div').fadeIn(1000);
	$('#xxx').text('onmouseenter: ' + count++);
})
.mouseleave(function() {
	$(this).find('div').fadeOut(1000);
	$('#yyy').text('onmouseleave: ' + count++);
});

</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito