Equivalent to hover for mobile apps

Question

What would be and equivalent for CSS hover on devices that have a touch screen, like tablets and smartphones?

I am trying to show arrows on my carousel, for desktop, I know I can use hover, but what to use when there is no cursor to hover with?

Answer 1

Use :active selector in combination with :hover.

:active selector should be called after the :hover selector.

Example

 .button:hover, .button:active{
   background-color: red;
 }

Answer 2

I believe that by default, touch devices do not have Hover effect, or at least they "treat" it differently - like a click event.

Example: if you have a dropdown menu on Hover on desktop machines, it will automatically be a dropdown menu on click on mobile touch devices.

As for current inquiry, I can propose a workaround, to show the arrows on devices with max-width smaller than 1200px.