1

Me gustaría mostrar una leyenda después de que mi mouse detecte el evento, mi problema es que logro capturar el evento pero no puedo hacer que mi leyenda salga. Mi código sería el siguiente:

document.addEventListener("DOMContentLoaded",(e) =>{

mostrarHover('.propiedades','.leyenda-hover');

 


});


  const $d = document;
 function mostrarHover(propiedades,hover){
  $d.addEventListener('mouseover',(e) =>{
    if(e.target.matches(propiedades)){
      for(let i= 0; i<propiedades.lenght;i++){
       
          $d.propiedades[i].querySelectorAll(hover).style.display='block'
       
      }
     console.log(e)
      
    }

  })

 
}



  
.middle{
    display: flex;
}


.leyenda-hover{
    display: none;
    border:none;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    width: 45px;
    height: 40px;
    text-align: center;
    font-size: 13px;
    line-height: 40px;
    font-family: Arial, Helvetica, sans-serif;
    margin: auto;

}

 

.propiedades{
    margin: 0 10px;
    width: 60px;
    height: 40px ;
    border-radius: 10px;
    text-align: center;
    line-height:40px ;

}
.propiedades:hover{
 background-color: #fdefef;
}
      <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/1bbadd233d.js" crossorigin="anonymous"></script>
  
   
  
    <title>Document</title>
</head>
<body>
 
   
      <div class="middle">
        <div class="home">
          <i class="fas propiedades fa-home"></i>
          <span class="leyenda-hover">Inicio</span>
        </div>
        <div class="user">
          <i class="fas propiedades  fa-user-friends"></i>
          <span class="leyenda-hover">Amigos</span>
        </div>
        <div class="play">
           <i class="far propiedades fa-play-circle"></i>
           <span class="leyenda-hover">Videos</span>
          </div>
        <div class="users">
          <i class="fas propiedades fa-users"></i>
          <span class="leyenda-hover">Grupos</span>
        </div>
        <div class="barras">
          <i class="fas propiedades   fa-bars"></i>
         
        </div>
      </div>
 





        
        
</body>

</html>

Lo que he realizado es que cargue los valores en el DOMcontent y les mandé a mi función el parametro, entonces como son varios elementos a los que quiero aplicarles el display block para que se vea, entonces usé un for para recorrerlos y aquí es donde no puedo hacer que se vean mis leyendas,la verdad soy inexperto y me gustaría aprender de ustedes.

10
  • Si el elemento al que quieres afectar es $d, entonces solo necesitas hacer esto: $d.style.display = "block". Tendrías que explicar qué contiene propiedades para entender el contexto de ese bloque de código.
    – user255960
    el 7 nov. 2021 a las 6:37
  • Hola buenas noches gracias por tu respuesta. Mira quiero hacer lo siguiente: propiedades tiene una caja con icono al momento de pasar el mouse debería mostrar conmo un hover una caja o leyenda que al momento de quitar el mouse se quite la leyenda, entonces logro detectar todos los eventos ´pero no me despliega nada. la variable $d es solo una breviación de document. el 7 nov. 2021 a las 6:43
  • Déjame ver si entendí bien. Me dices que propiedades contiene un elemento del documento (una caja) el cual contiene a otro elemento (un ícono), y lo que quieres es que, al momento de colocar el cursor del mouse sobre la caja se muestre un cuadro de texto a manera de leyenda. ¿Es así? En ese caso, tienes que asociar el elemento al cual quieres afectar con esa funcionalidad con los eventos mouseover y mouseout.
    – user255960
    el 7 nov. 2021 a las 6:48
  • Cuando se ejecute mouseover, muestras la leyenda. Suponiendo que se trata de un elemento, solo tienes que hacer elementoLeyenda.style.display = "block". Y cuando se produzca el evento mouseout, ocultas la leyenda elementoLeyenda.style.display = "none".
    – user255960
    el 7 nov. 2021 a las 6:49
  • Exacto eso mismo quiero hacer, y ya estan asociados incluso puedo ver los eventos en consola cuando los estoy detectando. mi problema es que la variable hover que en mi caso es la leyenda no le puedo aplicar el display block para que se vea. el 7 nov. 2021 a las 6:51

1 respuesta 1

1

No es necesario el bucle. Basta con que asocies los eventos mouseover y mouseout al menú de opciones, y verifiques si el elemento que directamente está siendo afectado por esos eventos contiene la clase propiedades. De ser así, puedes acceder a su respectiva leyenda a través de la propiedad nextElementSibling con la cual puedes tomar el elemento que sigue a la opción (que, en este caso, es la leyenda), y, finalmente, aplicas el display: block y display: none para cada caso.

function mostrarHover(propiedades, hover){
    let menu = document.querySelector("div.middle");
    
    menu.addEventListener('mouseover', (e) => {
        if (e.target.classList.contains("propiedades")){
            e.target.nextElementSibling.style.display = "block";
        }
    }, false);
  
    menu.addEventListener('mouseout', (e) => {
        if (e.target.classList.contains("propiedades")){
            e.target.nextElementSibling.style.display = "none";
        }
    }, false);
}
5
  • Epale! muchisimas gracias tu código funciona a la perfeccion . Dios te bendiga. el 7 nov. 2021 a las 7:40
  • De nada. Un saludo.
    – user255960
    el 7 nov. 2021 a las 7:41
  • Solo como comentario, dado que el elemento <i> es uno en línea (inline), en lugar de block tiene que ir inline, aunque ya no se mostraría por debajo de la opción asociada, sino a la derecha de esta.
    – user255960
    el 7 nov. 2021 a las 9:04
  • Tampoco es necesaria la función mostrarHover. Todo eso lo puedes colocar por fuera y seguirá funcionando.
    – user255960
    el 7 nov. 2021 a las 11:03
  • Gracias Alexis lo tomaré en cuenta, la verdad soy novato con ganas de aprender . de hecho quise hacerlo con hover desde css pero no sé por que no me dejaba por eso obté por hacerlo en js, de cualquier forma gracias a ti se solucionó. el 8 nov. 2021 a las 17:11

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.