Home / Questions / 79574
Accepted
Dimoreno
Asked: 2020-06-18 19:27:52 +0800 CST 2020-06-18 19:27:52 +0800 CST

Problem with css hover property

  • 772

I have a button that shows two buttons when hovering over the mouse, but I have an error that when I click on one of the two buttons that are shown, they are lost. How can I solve this problem?

This is my code:

.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>

The idea is that the two buttons that are shown are kept and that they are lost after clicking on one of them. Is it possible with pure CSS?

html

1 Answers

  1. Best Answer

    Here's a CSS-only solution:

    .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>

    • 0