Keep hover effect activated to smart phones & tablets

Question

I am creating a web and I use a hover effect in my home page to show the section names. But when I re-size the screen to see the small devices view obviously the hover effect doesn't work. How can I keep this effect activated? using CSS @media if is possible. Thanks.

Here's the code. http://www.bootply.com/bo9bKZUPSE

Answer 1

On mobile devices you can't apply hover effect what you can do is use :active element not as class but as a pseudo element to your

:active - Selects the link while it is being activated (being clicked on or otherwise activated).

&

:hover - When the mouse cursor rolls over a link, that link is in it's hover state and this will select it.

Since there's no such thing as cursor on mobiles you cant use :hover