Publicado em 20 de dez.

hide(); show(); evento do mause

#javascript #jquery #mauseout #mauseover

Galera, modelo simples de código Jquery não quer funcionar de jeito nenhum!

$(document).ready(function(e) {
 $(".descMiniVideo").hide();
});

$(".control").mouseover(function(){
 $(".descMiniVideo").show(2000);
 })

$(".control").mouseout(function(){
 $(".descMiniVideo").hide(2000);
 })

html....

<div class="itemVideo">
 <a class="control" href="#">
 <div class="descMiniVideo">
 <span>Título do Vídeo</span>
 </div>
 <img alt="Título do Vídeo" src="miniaturas/hqdefault.jpg"/>
 </a>
</div>

ao entrar com o mouse sobre a imagem a div descMiniVideo que está sobrepondo a imagem deve aparecer com o título do vídeo, ao sair deve desaparecer!

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

gabrieldarezzo· 20 de dez.

Tenta entender individualmente oq cada um desses caras fazem. (e olhar o console do dev-tools)

De forma resumida esse carinha aqui, avisa..."Ei só vamos começar a brincar quando o 'document' estiver 'ready',

Ou seja faz sentido você 'jogar' tudo que é de jQuery dentro dele....

$(document).ready(function() {
 //Here
});

Exemplo:

<!DOCTYPE HTML>

<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

<div class="itemVideo">
 <a class="control" href="#">
 <div class="descMiniVideo">
 <span>Título do Vídeo</span>
 </div>
 <img alt="Título do Vídeo" src="https://www.wired.com/wp-content/uploads/2015/09/google-logo-1200x630.jpg" style="width: 400px" />

 </a>
</div>

	<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
	<script type="text/javascript">
 $(document).ready(function() {
 //Esconde
 $(".descMiniVideo").hide();

 $( ".control" ).bind( "mouseover", function() {
 $(".descMiniVideo").show(2000);
 });

 $( ".control" ).bind( "mouseout", function() {
 $(".descMiniVideo").hide(2000);
 });
 });

	</script>

</body>
</html>

Gerciley· 20 de dez.

Gabriel, obrigado pela resposta,

eu já havia feito dessa maneira.. mas ele fica num loop.. exibindo e aparecendo direto....

$(document).ready(function(e) {
	$("#headFix").stop().animate({opacity:0 }, 0);
	$(".descMiniVideo").hide();

	//exibe
	$(".control").mouseover(function(){
 $(".descMiniVideo").show("fast");
 })

	//oculta
	$(".control").mouseout(function(){
 $(".descMiniVideo").hide("fast");
 })
});

sampaioops· 25 de dez.

tente usar essa logica, alterando da sua forma...

 function onMenu(){
 document.getElementById('dropdown').style.display = "block";
 }
 function outMenu(){
 document.getElementById('dropdown').style.display = "none";
 }

html:

<html>
<head>

 <title>Menu</title>

</head>
 <body>

<div style="float: left" id="menu" onMouseOver="onMenu()" onMouseOut="outMenu()"><a> Mais opções</a>
 <div id="dropdown" style="display: none;">
 <a href="#">BLABLA</a><BR />
 <a href="#">BLABLA</a>
 </div>
 </div>

 </body>
</html>