Dealing with :hover on Mobile in CSS Only

Dealing with a double touch :hover button is a pain for the mobile user. But :hover looks and works really well with mouse-pointer desktop environments. So how do we have both? Especially in the age of the hybrid touch desktop. I can’t believe I didn’t try this trick before.

It is really just as simple as declaring your css classes inside of a “large screen and up” media query.

.button { background:blue; }
@media screen and (min-width: 64em) {
  .button { transition:background 0.5s ease; }
  .button:hover { background:red; } 
}

This simple encapsulation of the transition and hover state in a large-and-up media query allows the mobile, and I’m declaring mobile by screen-size, user to go about their clicking business without the annoyance of the hover state.

Hope this simple solution helps for those who need a simple solution.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s