How do I disable mouse effects on mobile phones?

Question

How do I disable mouse effects on mobile phones?

Navigation

#1 by (1 votes)

1

I've finished my responsive site and now I'm in the testing phase on phones and tablets. But I came across extremely nasty browsing on mobile phones and tablets, because the :hover effects I put in are messing up when I slide my finger on the handsets. The effects are triggered when given a touch to scroll through the page. The effects I have ( :hover ) on the site and would like to disable on screens smaller than 768px (I already have a breikpoint @media queries at this point) are?

-webkit-transform:scale(1.1);
-webkit-transition: all .2s ease-in;

Thank you for some help.

html5 css eventos-do-mouse

asked by anonymous 18.02.2016 / 13:27

1 answer

How to insert query result in mysql with python Published App for Windows Phone does not install on devices [closed]

score 1 · Accepted Answer

As I mentioned above, you can leave by default disabled and only enable for resolutions higher than 768px, you can use @media.

Example:

div {
  width: 200px;
  height: 100px;
  background-color: yellow;
}

div:hover {
  -ms-transform: none;
  -webkit-transform: none;
  transform: none;
}

/*Regras para resoluções iguais e superiores a 768px*/

@media screen and (min-width: 768px) {
  div:hover {
    -ms-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg);
  }
}

<div>Hello World</div>