CODEWITHSUNDEEP
htmlcss
Takeshi Tokugawa YD
Takeshi Tokugawa YD

Reputation: 913

How to prevent hover side effect on scrolling in touch devices?

In touch devices, the scrolling could cause the hover state (designated by red background in animation below):

enter image description here

<div class="CardsFlow">
  <div class="Card"></div>
  <div class="Card"></div>
  <!-- and more -->
</div>

.CardsFlow

  width: 320px
  margin: 0 auto

  display: grid
  grid-template-columns: repeat(2, 1fr)
  grid-gap: 12px
  
  background: #bdc3c7
  padding: 6px
  
  
.Card

  height: 200px
  background: #2980b9
  
  
  &:hover
  
    background: #e74c3c

📄 JSFiddle

How to prevent it on touch devices? (But off course live normal :hover for mouse).

Upvotes: 1

Views: 136

Answers (1)

mpmcintyre
mpmcintyre

Reputation: 697

Ah yes, I struggled with this too, you can add the following class to the items you don't want to "select" and play with it to get what you want.

.noTouch {
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

Upvotes: 1

Related Questions