Pseudo-class hover on mobile devices?

You may be able to get away with just using CSS, depending on what you're hovering over and it's use-case when clicked, if it is to be clicked.

An easy answer, though maybe not the best depending, again, on UX, would be to simply add :acitve or :focus to be included with your :hover rules. You may or may not need both, :active and :focus; perhaps one or the other may suffice.

E.g.

.my-class:hover,
.my-class:active,
.my-class:focus {
  ...
}

Another way to accomplish this, for elements which would only have a :hover situation (read: not a click like an anchor) is directly in your HTML markup by attaching the onclick attribute with a value of void(0).

Possibly, a better solution, if using this technique would be, especially on an anchor or other click element would be to use ontouchstart. With ontouchstart you can leave the value empty within the quotes. I previously made a Codepen experiment using this technique that you can check.

One caveat to using this approach is the user will have to tap outside of the element in order to lose focus in order to revert the element back to it's original state declared in the CSS.

E.g.

<div class="my-class" onclick="void(0)"></div>

<!-- OR -->

<div class="my-class" ontouchstart=""></div>

Yet another way could be to use Modernizr as it provides .touch and .no-touch classes if the device/browser supports touch events or not. Then you could accomodate those users accordingly, such as not displaying/ performing the :hover effects for users that don't have hover events.