Comment puis-je désactiver les CSS :hover dans une requête de média?

J'ai une info que j'ai seulement à déclencher lorsque la fenêtre a un min-width de 900px. Et je veux désactiver le hover effet lorsque la fenêtre est plus petite.

Comment dois-je faire?

PS: j'utilise Sass (SCSS) qui pourrait être utile.

C'est un petit extrait de l' :hover effet que je veux désactiver. Il est utilisé pour agrandir les images

img {
    display: table-cell;
    width: 100%;
    max-width: $painting-max-width;
    max-height: $painting-max-height;

    margin: auto;

    //zoom in animation transition
    transition: $painting-zoom-delay;
    transition-timing-function: cubic-bezier(0.25,0.46,0.45,0.94) 0s;

    &:hover {
        max-width: $painting-zoom-size;
        max-height: $painting-zoom-size;
    }

}
  • Quelles sont les hover styles dans les tailles normales?
  • J'ai ajouté un petit extrait de code . Il s'agit essentiellement d'un effet de zoom
  • Cochez cette réponse, je pense que c'est ce que vous voulez: <stackoverflow.com/a/10166533/4627253>
InformationsquelleAutor CorPruijs | 2015-07-15
  1. 5

    Insérer le :hover de style à l'intérieur d'un mediaquery, seulement lorsque la taille de la fenêtre d'affichage est au moins 900px large, de sorte que vous n'avez pas besoin de revenir sur le style plus tard.

    img {
    display: table-cell;
    width: 100%;
    max-width: $painting-max-width;
    max-height: $painting-max-height;

    margin: auto;

    //zoom in animation transition
    transition: $painting-zoom-delay;
    transition-timing-function: cubic-bezier(0.25,0.46,0.45,0.94) 0s;

    @media all and (min-width: 900px) {
        &:hover {
           max-width: $painting-zoom-size;
          max-height: $painting-zoom-size;
        }
    }

}
    InformationsquelleAutor fcalderan
  2. 3

    Vous pouvez utiliser une requête de média pour permettre à la classe spécifique avec le hoover effet que si l'écran est plus large que 899px:

    @media (min-width: 900px) {
   img:hover {
      max-width: $painting-zoom-size;
      max-height: $painting-zoom-size;
   }
}
    InformationsquelleAutor Denis Thomas