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. 2023 a las 1:38

1 respuesta 1

4

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

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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