how to keep hover effect after clicking button and moving cursor away

Question

I have a button which I am styling in css. I have a hover effect on the button , it works well. However if I click the button and move the cursor away and then back again, the hover effect is lost. How can I fix this in css?

Check out the answer to this question: https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css — JimA, Sep 15 '21 at 10:23
Please provide enough code so others can better understand or reproduce the problem. — Community, Sep 21 '21 at 19:11

Mohammad Mohammadi · Answer 1 · 2021-09-15T10:30:00.933

If I understand correctly you could do the same thing by moving your transitions to the link rather than the hover state:

    ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

see this demo

how to keep hover effect after clicking button and moving cursor away

1 Answers1