How to disable mouse effects on mobile phones?

Asked

Viewed 565 times

1

I finished my responsive site and now I’m in the testing phase on mobile phones and tablets. But I came across an extremely unpleasant navigation on mobile phones and tablets, because the effects :hover which I have placed are interfering by sliding your finger (touch) on the devices. The effects are triggered when tapped to scroll through the page. The effects I have (:hover) on the site and would like to disable on screens smaller than 768px (already have a breikpoint @media queries at this point ) are?

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

I appreciate some help.

css html5

  • Why don’t you do the reverse ? just enable Hover for screens higher than 768px?

  • It is a great idea. Thanks. But there is no function for this? I have to "None" up to 768 px, but it did not work. If it doesn’t exist I’ll do just as you said, sheltered

1 answer

1


As I mentioned above, you can leave disabled by default and only enable 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>

See also working on: jsfiddle

  • Perfect is already working. I have declared nothing above 768px and only to @media queries below 768px (min-width: 768px). obg

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.