4

Estoy buscando que un texto se muestre cuando se pasa el mouse por encima de una foto, adjunto mi código:

var personalidad = document.getElementById('personalidad');
function Mostrar() {
  document.getElementById('personal').addEventListener('mouseover', function () {
    personalidad.style.display = "inlineblock"
  });
}

function NoMostrar() {
  document.getElementById('personal').addEventListener('mouseout', function () {
    personalidad.style.display = "none"
  });
}
<html lang="es-AR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="Eventos.js"></script>
  <link rel="stylesheet" href="estilos.css" type="text/css">
  <base target="_self">
</head>
<body>
  <article>
    <img src="FotoPerfil.jpg" id="personal">
    <div id="personalidad">
      <p></p>
      <p></p>
    </div>
  </article>
  <script type="text/javascript" src="Eventos.js"></script>
</body>
</html>

Pero ponga lo que ponga me da un error al querer leer el evento mouseover, tanto si lo pongo como evento o como escuchador de evento.

1
  • 2
    Me suena a que escribes mal el display... Recuerda que es inline-block
    – Alfa Rojo
    el 2 feb. a las 1:38

1 respuesta 1

5

Primero, tienes un error de sintaxis aquí (tal como te mencionan en los comentarios), en vez de ésta línea:

personalidad.style.display="inlineblock"

Debería ser:

personalidad.style.display="inline-block"

También, tus funciones Mostrar() y NoMostrar() nunca los estás llamando, lo que hice fue llevar al listener fuera, quedando así:

document.getElementById('personal').addEventListener('mouseover', function () {
  personalidad.style.display = 'inline-block';
});

document.getElementById('personal').addEventListener('mouseout', function () {
  personalidad.style.display = 'none';
});

Y por último, el texto debe permanecer oculto por defecto (o sea cuando cargue la pagina) para que al pasar el mouse, el texto se muestre:

var personalidad = document.getElementById('personalidad');
personalidad.style.display = 'none';

Código completo:

var personalidad = document.getElementById('personalidad');

// por defecto oculto el texto.
personalidad.style.display = 'none';

// al poner el mouse encima del elemento "personal"...
document.getElementById('personal').addEventListener('mouseover', function () {
  personalidad.style.display = 'inline-block'; // muestro al texto
});

// y al quitar el mouse encima del elemento "personal"...
document.getElementById('personal').addEventListener('mouseout', function () {
  personalidad.style.display = 'none'; // oculto al texto
});
<img src="https://i.imgur.com/wBWzOZo.png" width="200px" id="personal">
<br>
<div id="personalidad">
  <p>Esto es un texto</p>
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.