Foros del Web - Ver Mensaje Individual - Duda Sobre mostrar y ocultar elementos al pasar el mouse por encima

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