0

Necesito que al pasar el mouse sobre el título de mi acordeón se despliegue el cuadro de contenido. Estoy trabajando en wordpress y con elementor. Lo que necesito se podría realizar unicamente con css y como? o debo insertar js. Mi página actualmente se ve así introducir la descripción de la imagen aquí

Necesito que al pasar por el título de Factura se despliegue la parte de abajo. Además, es posible manipular los otros cuadros de contenido? Por ejemplo, que se encuentre desplegado unicamente el cuadro de contenido en donde tengo el mouse. Muchas gracias.

1
  • Podrías poner tu código actual? Con el html debería ser suficiente
    – Ilsanchez
    el 27 feb. 2019 a las 21:11

1 respuesta 1

1

El problema que presenta tiene una fácil solución.

Añadiendo :hover a la etiqueta por la que queramos pasar por encima podremos cambiar estilos y la visibilidad del elemento hijo con display: none.

Aquí te dejo un pequeño ejemplo para que te hagas a la idea:

body {
    margin: 0;
    padding: 0;
}

#desplegable ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* color del fondo del contenedor */

#desplegable div div {
    background-color: #2e518b;
}


/* estilo predefinido al contenedor */

#desplegable div a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    text-transform: uppercase;
}


/* posicion del contenedor en la pagina */

#desplegable div div {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
}


/* efecto del contenedor al pasar el mouse por encima */

#desplegable div div:hover {
    background: #5b78a7;
}


/* Quitarenos la visivilidad con display:none cuando no estemos encima */

#desplegable div ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgb(214, 214, 214);
    padding: 0;
}


/* Tamaño del contenido. AL estar al 100% el ancho se ajustara al ancho del contenedor */

#desplegable div ul li {
    float: none;
    width: 100%;
}


/* Visualizaremos al pasar por encima el contenido de la lista o lo que queramos meter dentro. */

#desplegable div div:hover>ul {
    display: block;
}
<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <link href="style.css" rel="stylesheet">
</head>

<body>
    <nav id="desplegable">
        <div>
            <div><a href="#">Pasa por encima</a>
                <ul>
                    <li>
                        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore explicabo veritatis odit deleniti adipisci, necessitatibus, tenetur commodi possimus saepe nisi porro. Quis, aut. Quisquam doloremque sapiente asperiores exercitationem
                            facere aliquid!</p>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</body>

</html>

Espero que te sirva. Un saludo.

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.