some problem for transition triangle when hover , when move mouse out the color reback so fast

Question

i wrote this codes

style :

.triangle{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width:0 0 100px 300px ;
    border-color: transparent transparent black transparent;

}
.triangle:hover{
    transition: ease .9s all;
   border-color: transparent transparent red transparent;

}

and html :

<div class="triangle"></div>

my problem is when i move out of div the color reback to black so fast anybody can help me to solve this problem ?

Lenny · Answer 1 · 2020-05-02T18:11:21.020

You should move the transition declaration.

.triangle{
   width: 0px;
   height: 0px;
   border-style: solid;
   border-width:0 0 100px 300px ;
   border-color: transparent transparent black transparent;

   transition: ease .9s all; /*applied both when hovering, and not hovering*/

}
.triangle:hover{
   border-color: transparent transparent red transparent;
}

If you put a transition in the hover state, it will only be applied when you're hovering over it. So when you move your mouse out of the triangle, the transition is gone.

By moving it to the .triangle class, it's applied to both states.

22 seconds faster. good answer. – focus.style May 02 '20 at 18:10 — focus.style, May 02 '20 at 18:10

score 1 · Answer 2 · answered May 02 '20 at 18:10

Try to replace transition

.triangle{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width:0 0 100px 300px ;
    border-color: transparent transparent black transparent;
    transition: ease .9s all;

}
.triangle:hover{

   border-color: transparent transparent red transparent;

}

some problem for transition triangle when hover , when move mouse out the color reback so fast

2 Answers2