J'ai vu cette question plusieurs fois mais rien ne semble fonctionner pour ce que je recherche.

Je dois conserver mes :hover effets dans ma feuille de style car j'en ai quelques-uns sur le bureau. Dès que j'appuie sur 900px, je veux les supprimer.

Existe-t-il un moyen de supprimer un survol, par exemple, sur certains éléments en survol, je change l'opacité. Suis-je capable de faire

@media screen and (max-width: 900px) {
  .my_element:hover {
    opacity: none:
  }
}

Ainsi, sur les appareils mobiles / à écran tactile, le changement d'opacité au survol est par défaut.

0
pourmesomecode 7 mars 2016 à 17:21

3 réponses

Meilleure réponse

Ce n'est pas la valeur par défaut correcte pour l'opacité. La valeur par défaut est opacity:1. Vous pouvez rechercher les valeurs par défaut à l'aide de MDN (ou de toute autre ressource, mais MDN l'a généralement en avant et au centre) comme ceci: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity


Une autre option consiste à le définir sur initial. Cela ferait la règle opacity: initial;. (Notez que ce n'est non pris en charge dans IE, mais il est pris en charge dans Edge)


Enfin, vous pouvez envisager de placer vos valeurs de survol dans une requête multimédia opposée. Pour votre exemple, ce serait le suivant:

J'ai vu cette question plusieurs fois mais rien ne semble fonctionner pour ce que je recherche.

Je dois conserver mes effets: hover dans ma feuille de style car j'en ai quelques-uns sur le bureau. Dès que j'ai atteint 900 pixels, je veux les supprimer.

Existe-t-il un moyen de supprimer un survol, par exemple, sur certains éléments en survol, je change l'opacité. Suis-je capable de faire

@media screen and (min-width: 901px) {
  .my_element:hover {
    /* your hover state style rules */
  }
}
3
Joseph Marikle 7 mars 2016 à 14:27

Il n'y a pas de moyen simple (pour autant que je sache) de supprimer simplement chaque effet de survol. Vous devrez réinitialiser les effets individuels à chaque vol stationnaire.

Cependant, je voudrais mentionner que cela n'est pas nécessaire dans la plupart des cas. Pour les appareils tactiles, aucun effet de survol ne doit être présent, car il n'y a pas de curseur avec lequel survoler. Laissez-le tranquille et considérez qu'il est impossible de l'atteindre.

0
OptimusCrime 7 mars 2016 à 14:27

Vous pouvez inverser votre logique, en utilisant une première approche mobile, au lieu d'ajouter vos effets de survol à 900 pixels. c'est-à-dire (largeur min: 900px)

2
dylanjameswagner 7 mars 2016 à 14:32