Equivalent to hover for mobile aps

Question

What would be and equivalent for CSS hover, just to be used on devices that have a touch screen, like tablet 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 over?

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.