CODEWITHSUNDEEP
javascripthtmlcss
Philip Droubi
Philip Droubi

Reputation: 51

Disable css hover when touch end in touch device

In pure JavaScript, How can I disable the hover effect (of a div or btn ...etc) when user's touch end in touchable devices?

I have some anchors and buttons with effects on hovering, but on touch devices, the effect of touch remains visible even after the user takes his finger off the screen.

I don't want the hover effect to be completely removed from touch devices... but what I want is for the hover to end after I stop touching the element.

I tried to play with the touchend in JavaScript, but it don't work.

Can anyone help?

Upvotes: 1

Views: 2863

Answers (2)

Yuri Boblak
Yuri Boblak

Reputation: 11

CSS example: "pointer: fine" + :hover for mouse and "pointer: coarse" + :active for tablet/mobile

  .change-color {
background: #4e75ff;
  }

@media (pointer: fine) {
  .change-color:hover {
    background: #6c8cff;
  }
}

@media (pointer: coarse) {
  .change-color:active {
    background: #6c8cff;
  }
}

in JS try usіng eventType "pointerover" and "pointerout" instead of "mouseover" and "mouseout"

Upvotes: 1

Youssouf Oumar
Youssouf Oumar

Reputation: 46291

:hover is for pointing devices. You shouldn't be trying to optimize it for other types. Here is a definition from mdn:

The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

A wise thing to do to avoid this weird behavior for non-pointing devices, is to apply the hover effect only for those who support it with @media (pointer: fine), like so:

button {
  /* Styles for all type of devices */
}

@media (pointer: fine) {
  button {
    /* Styles for pointing devices */
  }
  button:hover {
    /* Hover effects for pointing devices */
    color:red;
  }
}

Upvotes: 3

Related Questions