[SOLUCIONADO] Duda Sobre mostrar y ocultar elementos al pasar el mouse por encima

jhoannn21 · #1 (**permalink**) 09/11/2014, 17:41

Bueno muchachos les pido ayuda soy un total novato y pues donde vivo el internet es pobre y no puedo ver vídeos he estado siguiendo un manual que baje de desarrolloweb.com quisiera por favor que ustedes me indiquen cual es mi error. Lo que trato de realizar es que al poner el mouse encima del div al que le asigne la id capa me aparezca otro div al que le asigne mensaje y si quito el mouse la capa mensaje desaparezca les dejo el codigo espero me puedan ayudar seguro es una tontada he revisado y para mi todo esta bien aunque no entiendo lo del .css yo no tengo ningún css en ese proyecto.. y todo esta dentro de la misma carpeta bueno aquí lo dejo espero su ayuda y si es una estupidez perdonen la novatada quiero aprender en serio. por cierto estoy usando jquery.

código :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("$capa").mouseenter(function(evento){
$("#mensaje").css("display","block");
});
$("#capa").mouseleave(function(evento) {
$("mensaje").css("display","none");
});

</script>
<title>Capa segun mouse sobre otra capa</title>
</head>
<body>
<div id="capa" style="padding: 10px; background-color:lightgreen;">Pon el raton sobre esta capa</div> <br/>
<div id="mensaje" style="padding: 10px; background-color:lightgreen;">Haz puesto el raton sobre la capa ahora quitalo de ahí!!</div>

</body>
</html>

Alexis88 · #2 (**permalink**) 09/11/2014, 20:12

Para casos como el que explicas, es útil utilizar el método hover:

Código Javascript:

Ver original$("#capa").hover(function(){
    $("#mensaje").show();
}, function(){
    $("#mensaje").hide();
});

Este método recibe dos funciones. En la primera, se especifican las acciones a realizar cuando el cursor del mouse se pose sobre el elemento de id 'capa', mientras que, en la segunda función, se especifican las acciones a realizar cuando el cursor del mouse sea retirado del elemento en cuestión.

En la primera función, tomo al elemento de id 'mensaje' y lo muestro, utilizando para ello el método show, mientras que, en la segunda función, lo oculto, utilizando el método hide.

Recuerda, la primera función se ejecutará al posar el cursor del mouse sobre el elemento vinculado al método hover, mientras que, la segunda función, se ejecutará cuando retires el cursor del mouse de dicho elemento.

Saludos

jhoannn21 · #3 (**permalink**) 10/11/2014, 07:14

Entiendo lo que me dices amigo lo cambie asi como tu dices pero igualmente sigue sin funcionar :S me pregunto si sera que mi jquery es una version vieja

Código:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	 	$("#capa").hover(function(){
    		$("#mensaje").show();
	}, 	function(){
    	$("#mensaje").hide();
});

	 </script>
	<title>Capa segun mouse sobre otra capa</title>
</head>
<body>
	<div id="capa" style="padding: 10px; background-color:lightgreen;">Pon el raton sobre esta capa</div> <br/>
	<div id="mensaje" style="padding: 10px; background-color:lightgreen;">Haz puesto el raton sobre la capa ahora quitalo de ahí!!</div>
	
</body>
</html>

mauritosuarez · #4 (**permalink**) 10/11/2014, 07:22

Hola jhoannn21, prueba de esta manera.

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
            $("#capa").hover(function(){
                $("#mensaje").show();
        },  function(){
            $("#mensaje").hide();
        });
    });
    </script>
    <title>Capa segun mouse sobre otra capa</title>
</head>
<body>
    <div id="capa" style="padding: 10px; background-color:lightgreen;">Pon el raton sobre esta capa</div> <br/>
    <div id="mensaje" style="padding: 10px; background-color:lightgreen;">Haz puesto el raton sobre la capa ahora quitalo de ahí!!</div>
    
</body>
</html>

Espero te sirva.

Saludos.

jhoannn21 · #5 (**permalink**) 10/11/2014, 07:49

Ya probe y tampoco me sirve :(

mauritosuarez · #6 (**permalink**) 10/11/2014, 07:52

Hola jhoannn21, el código que te pase funciona ok yo lo probe, copiaste y pegaste el código tal cual te lo pase?

jhoannn21 · #7 (**permalink**) 10/11/2014, 08:14

ya verifique si funciona pero aun no se si mi error tiene quie ver con que no se puse el document.ready o por el jquery que use sera probrar pero muchas gracias por tu tiempo y atencion

Alexis88 · #8 (**permalink**) 10/11/2014, 11:35

Cita:

Iniciado por jhoannn21

Entiendo lo que me dices amigo lo cambie asi como tu dices pero igualmente sigue sin funcionar :S me pregunto si sera que mi jquery es una version vieja.

Eso debe de estar así:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Capa segun mouse sobre otra capa</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#capa").hover(function(){
                $("#mensaje").show();
            }, function(){
                $("#mensaje").hide();
            });
        });
     </script>
    <style type="text/css">
        #capa, #mensaje{
            padding: 10px; 
            background-color: lightgreen;
        }
 
        #mensaje{
            display: none;
        }
    </style>
</head>
<body>
    <div id="capa">Pon el raton sobre esta capa</div>
    <div id="mensaje">Haz puesto el raton sobre la capa ahora quitalo de ahí!!</div>    
</body>
</html>

Fíjate que, el código JS, se encuentro dentro de $(document).ready(), esto es para que, dicho bloque de código, cargue una vez que haya terminado la carga del documento, además, coloqué los estilos entre etiquetas <style> pues esa es la manera recomendada en lugar de colocarlos dentro de los elementos del documento, aunque sería mejor que tengas los estilos en un archivo CSS. Como verás, también oculto al <div> de id 'mensaje'.

DEMO y CÓDIGO

Prueba y nos cuentas cómo te fue.

Saludos