Hover Effect on iPad not going off

Question

I have a hover effect over my menu for one page website, in desktop when user hover a navigation link the color changes to #ed1c28

.nf-navbar .navbar-collapse a:hover {
   color: #ed1c28;
}

and when user click the nav link, page scroll down for that section

 $("html, body").animate({
    scrollTop: ($(winHash).offset().top) + "px"
 }, {
    duration: 1000
 });

Its fine for desktop. But on iPad when user click on the nav link the hover effect is activated and color of link changes to #ed1c28 and page scroll to the section, but the color still remains the same #ed1c28 means hover effect is still on. how can i turn that off ?

Answer 1

Try adding active:

.nf-navbar .navbar-collapse a:active {
   color: #00000;
}