How to remove :hover on touch devices?

Puneet Sharma

5 years ago

As touch devices like mobiles and tablets do not have mouse cursors like desktops and laptops, they display a hover state whenever you touch the element. They keep on displaying the hover state even when you are not touching the element anymore. Due to this, the overall user experience becomes confusing for the users as your website or web application is not giving the correct feedback.

The best way to display the touch state on mobile devices is to use “:active” pseudo-selector on an element.

a:active { color: red; }

To avoid hover styles to display on touch devices you can use one of the following strategies:

1. Place all your :hover CSS rules in a @media block:

@media (hover: hover) {
    a:hover { color: red; }
}

2. Override all your hover rules for mobile devices

a:hover { color: red; }

@media (hover: none) {
    a:hover { color: inherit; }
}

DEMO

Open demo in a full window – https://demos.webdevpuneet.com/set1/remove-hover-on-touch/index.html

DEMO HTML

<button class="button1">Button with :hover and without :active</button>
<button class="button2">Button with :active for mobile devices</button>

DEMO CSS

.button1,
.button2{
  padding:10px;
}
.button1:hover{
  background: yellow;
  color:#000;
  border-color:yellow;
  cursor: pointer;
}
@media (hover: hover) {
  .button2:hover{
	background: blue;
	color:#ffffff;
	border-color:blue;
	cursor: pointer;
  }
}
@media (hover: none) {
  .button2:active{
	background: blue;
	color:#ffffff;
	border-color:blue;
	cursor: pointer;
  }
}

1. Place all your :hover CSS rules in a @media block:

2. Override all your hover rules for mobile devices

DEMO

DEMO HTML

DEMO CSS

Related queries with the same solution: