1

Tengo un botón que al pasar el mouse se muestran dos botones, pero tengo un error que al momento de dar clic en un botón de los dos que se muestran éstos se pierden. ¿Cómo puedo solucionar este problema?

Éste es mi código:

.stBoton {
    padding: 10px;
}

.opciones {
    color: red;
    display: none;
}

.stBoton:hover + .opciones {
    display: block;
}
<div>
    <button type="button" class="stBoton">
        click
    </button>
    <div class="opciones">
        <button type="button" class="stBoton">
            click1
        </button>
        <button type="button" class="stBoton">
            click2
        </button>
    </div>
</div>

La idea es que se mantengan los dos botones que se muestran y que se pierdan después de dar clic en uno de ellos. ¿Es posible con CSS puro?

3
  • Es necesario solo con CSS? el 18 jun. 2017 a las 3:37
  • si o si es posible con angularjs que con eso tambien estoy trabajando
    – Dimoreno
    el 18 jun. 2017 a las 3:54
  • ¿Esta solución sirvió @DiegoIsraelMoreno?
    – Chun
    el 18 jun. 2017 a las 5:18

1 respuesta 1

0

Aquí hay una solución sólo con CSS:

.stBoton{
    padding: 10px;
}
.opciones{
    color: red;
    display: none;
}

.stBoton:hover + .opciones,
.opciones:hover{
    display: block;
}
.opciones:active{
    display: none;
}
<div>
    <button type="button" class="stBoton">
        click
    </button>
    <div  class="opciones">
        <button type="button" class="stBoton active-uno">
            click1
        </button>
        <button type="button" class="stBoton active-dos">
            click2
        </button>
    </div>
</div>

1
  • 1
    Gracias amigo perdón por la demora.
    – Dimoreno
    el 19 jun. 2017 a las 1:28

Tu Respuesta

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

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