Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarte pessoal,
Estou com problema com eventos mouse, tenho uma div#box dentro dela tenho outra div.content sendo esta está desabilitada (dispplay:none), o que eu quero fazer é que quando ao passar o mouse em cima da div#box habilite a div.content e quando o mouse sair da área da div#box desabilite a div.content com tempo me 4 segundos.
Vou passar o código abaixo o que eu fiz está funcionando legal, só está com problema que quando eu retiro e volto novamente a passar mouse em cima da div#box a ação do evento mouseleave ainda opera e neste caso teria que ser anulada.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#box').mouseenter(function(){
$('.content').slideDown(300);
}).mouseleave(function(){
setTimeout(function(){
$('.content').slideUp(300);
}, 3000);
});
});
</script>
<style type="text/css">
#box{ background:#fc0; width:300px; height:300px;}
.content{ background:#000; color:#fff; display:none;}
</style>
</head>
<body>
<div id="box">
<div class="content">Conteúdo</div>
</div>
</body>
</html>Vlw pessoal !!
Carregando comentários...