Home / Questions / 430137
Accepted
Agustin G.
Asked: 2022-02-23 05:14:48 +0800 CST 2022-02-23 05:14:48 +0800 CST

When hovering the mouse over the button, the arrow is animated correctly, but when removing the mouse, the return of the arrow is done abruptly

  • 772

I have a button similar to the one in the code, that when I click on it (the class is added or removed .active, which does not happen in the SO code editor, so I replaced it .activewith :hover) I want the "little arrow" that is at the beginning turn down, or point right again.

The thing is that, as you will see, when you hover the mouse over the button, the arrow animates and rotates correctly, but when you remove the mouse, the arrow returns abruptly.

My question is: Where or in what way should I place the transition so that it is displayed correctly when the arrow rotates from the bottom to the right?

.titulo-item::before{
    content: '> ';
    font-weight: 700;
    transition: .3s ease all;
}

.titulo-item:hover::before{
    display:inline-block;
    transform: rotate(90deg) !important;
    transition: .3s ease all;
}

.titulo-item{
    cursor:pointer ;
    padding: 1rem 0rem;
    border:none;
    background-color: transparent;
    display: block;
    border-bottom: 1px solid #eeeeee;
    transition: .3s ease all;
    outline:none;
}
  <button class="collapsible titulo-item">
                           Soy un boton
  </button>

css

1 Answers

  1. Best Answer

    He display: inline-blockis what is breaking your transition when he loses the hover, put him in the ::before.

    He transitionshould only be in the::before

    .titulo-item::before{
    content: '> ';
    font-weight: 700;
    transition: .3s ease all;
    display:inline-block;
}

.titulo-item:hover::before{
    transform: rotate(90deg) !important;
}

.titulo-item{
    cursor:pointer ;
    padding: 1rem 0rem;
    border:none;
    background-color: transparent;
    display: block;
    border-bottom: 1px solid #eeeeee;
    transition: .3s ease all;
    outline:none;
}
    <button class="collapsible titulo-item">
                           Soy un boton
  </button>

    • 5