Problem with property hover css

Question

Problem with property hover css

Navigation

#1 by (0 votes)

1

I have a button that when the mouse passes two buttons are shown, but I have an error that when clicking on a button of the two 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 to keep the two buttons that are shown and that are lost after clicking on one of them. Is it possible with pure CSS?

html css3 css

asked by Dimoreno 18.06.2017 в 05:27

source

1 answer

Problems with select2: does not show results with JQuery How to serialize objects to a database in Java? [closed]

score 0 · Accepted Answer

Here is a solution with CSS only:

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