1

Terminei o meu site responsivo e agora estou na fase de testes em celulares e tablets. Mas me deparei com uma navegação extremamente desagradável em celulares e tablets, pois os efeitos :hover que coloquei estão a atrapalhar ao deslizar o dedo (touch) nos aparelhos. Os efeitos são acionados quando dado toque para percorrer a pagina. Os efeitos que tenho (:hover) no site e gostaria de desabilitar em telas menores que 768px (já tenho um breikpoint @media queries neste ponto ) são?

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

agradeço alguma ajuda.

2
  • Por que você não faz o inverso ? so habilite o hover para telas superiores a 768px? 18/02/2016 às 12:39
  • Olha que é uma ótima ideia sim. Obrigado. Mas será que nao existe nenhuma função para isto? tenho por "none" ate 768 px, mas nao funcionou. Se nao existir vou fazer assim mesmo como voce falou, abrigado
    – GOLX
    18/02/2016 às 12:58

1 Resposta 1

1

Como citei acima, você pode deixar por padrão desabilitado e so habilitar para resoluções superiores a 768px, você pode utilizar o @media.

Exemplo:

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>

Veja funcionando também no: jsfiddle

1
  • Perfeito ja esta em funcionamento. Nao declarei nada acima de 768px e somente a @media queries abaixo de 768px (min-width: 768px).obg
    – GOLX
    18/02/2016 às 22:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .