0

Lo que intento hacer es que, al pasar el cursor por cierta parte de la canción, aparezca una foto, y al sacar el cursor desaparezca. Intento usar este método. también lo vi en un video, y no logro encontrar donde esta mi error. Logro que aparezca la imagen pero está ahí estática. sin necesidad del hover, y por lo tanto no desaparece tampoco. que estoy haciendo mal? hay algun programa que tengo que descargar? algo que tengo que instalar? (no hice ninguna de esas dos cosas)


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<link rel="stylesheet" type="text/css" href="cssystyle.css">    
</head>

<body>
    
    <section>   
    <div class="container hovring">     
        
<ul>
    <li>
        <span>Flashback when you met me<br>
Your buzzcut and my hair bleached</span>
<img src="../imagenes/fotos para info/hair.jpg" alt="">
    </li>
</ul>
    
    </div>
    </section>
    
</body>
</html>

Y acá el CSS que usé:

@charset "utf-8";
/* CSS Document */




*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

section{}
.container{
    width: calc(100% - 200px);
    margin: auto;
    padding: 100px;
}

ul{
    list-style: none;
}

ul li{
    font-size: 40px;
    line-height: 1.8;
    display: inline-block;
}


.hovring ul li img{
    display: none;
}

.hovring ul li:hover img{
    display: block;
}


1
  • probé tu código y cuando paso el cursor sobre los textos aparece una imagen abajo del texto, cuando alejo el cursor desaparece dicha imagen, no encuentro el problema en tu código.
    – Roy
    Commented el 27 oct. 2021 a las 15:03

2 respuestas 2

0

Puedes hacerlo con Js

<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> 
</head>
<body>
    <section>   
    <div class="container hovring">     
                <ul>
                    <li>
                        <span id="mostrar" onmouseover="mostrar('imagen_mostrar',1);" onmouseout="mostrar('imagen_mostrar',2);">Flashback when you met me<br>
                                Your buzzcut and my hair bleached</span>
                            <br>
                                <label id="imagen_mostrar" style="display:none;">Imagen</label>
                    </li>
                </ul>
    </div>
    </section>
</body>
</html>
<script type="text/javascript">
    function mostrar(id,tipo)
    {
        if (tipo==1) 
        {
            $("#"+id).show("slow");
        }
        if(tipo==2)
        {
            $("#"+id).hide("slow");
        }
    }
</script>
1
  • MUCHISIMAS gracias!! Me salvaste!
    – danistor_m
    Commented el 27 oct. 2021 a las 21:49
0

El único problema es el display: none. Para que tenga la transición, no debe tener display: none, sino que visivility y opacity.

La imagen en sí debe tener display: block en el archivo normalize.css o bootstrap.css o main.css o lo que uses. El punto es que, para que sea visible con :hover, debes usar visibility y opacity.

Si no deseas una transición, y que aparezca bruscamente, el CSS está comentado.

li {
 list-style: none;
 font-size: 20px; 
 line-height: 1.8; 
 display: inline-block; 
 position: relative;
}

li span {
 cursor: pointer
}

li img {
 display: block;
 width: 100%;
 visibility: hidden;
 opacity: 0;
 position: absolute; 
 bottom: 100%;
 left: 0; 
 z-index: 1; 
 transition: all 0.3s ease-in-out; 
 transform: scale(0);
}

li:hover img {
 visibility: visible; 
 opacity: 1;
 transform: scale(1);
}

/* OPCIONAL SIN TRANSICIÓN */
/*
li img {
 display: none;
 position: absolute; 
 bottom: 100%; 
 left: 0; 
 z-index: 1; 
}

li:hover img {
 display: block
}
*/
1
  • no, aún sacandole el display: none; no funciona. Probé usando sólo los códigos de la "opción sin transicion" que escribiste pero sigue el mismo problema...
    – danistor_m
    Commented el 27 oct. 2021 a las 3:42

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.