1

soy nuevo programando y tengo un problema con el hover en css, trato de hacer una transicion al pasar el mouse por la pantalla y cuando lo hago no funciona, se queda el section de hola mundo y no aparece el texto del section "des", adjunto codigo de html

y adjunto el codigo del css

section.menu{
        width: 400px;
        height: 33px;
        text-align: center;
        color: yellow;
        background-color: blue;}
    section.des{
        width: 400px;
        height: 0px;
        overflow: hidden;
        background: blue;
        transition: height 0.9s;
    }
    section.menu:hover section.des{
        height: 400px;
    }
    <html>
    <head>
        <link href="css/estilo.css" type="text/css" rel="stylesheet">
        <meta charset="utf-8">
    </head>
    <body>
        <section class="menu">HOLA MUNDO</section>
        <section class="des">BLABLABLABLA</section>
    </body>
</html>

se agradece de antemano , muchas gracias.

3
  • No trabajo mucho con CSS, pero, ¿esto va junto section.menu:hover section.des? Commented el 6 sept. 2019 a las 1:28
  • si, los codigos que he visto, los usan juntos
    – francisco
    Commented el 6 sept. 2019 a las 1:31
  • ¿Ya probaste separando el section.des o añadiendo ~ al mismo? algo como section.menu:hover ~ section.des Commented el 6 sept. 2019 a las 1:33

1 respuesta 1

1

Lo que falta es colocarle en el codigo de hover el simbolo de ~ para selector de hermano general para lo ejecute, todo lo demas esta bien:

<style>
     section.menu{
        width: 400px;
        height: 33px;
        text-align: center;
        color: yellow;
        background-color: blue;}
    section.des{
        width: 400px;
        height: 0px;
        overflow: hidden;
        background: blue;
        transition: height 0.9s;
    }
    section.menu:hover ~ section.des{
        height: 400px;
    }
</style>

Te invito a que leas este link para los selectores:

https://www.w3schools.com/css/css_combinators.asp

Tabla de explicacion de selectores:

introducir la descripción de la imagen aquí

Puedes Probar el codigo aqui:

  section.menu{
            width: 400px;
            height: 33px;
            text-align: center;
            color: yellow;
            background-color: blue;}
        section.des{
            width: 400px;
            height: 0px;
            overflow: hidden;
            background: blue;
            transition: height 0.9s;
        }
        section.menu:hover ~ section.des{
            height: 400px;
        }
 <section class="menu">HOLA MUNDO</section>
    <section class="des">BLABLABLABLA</section>

1
  • muchas gracias, funciono
    – francisco
    Commented el 6 sept. 2019 a las 1:37

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.