OK, j'espère que tout cela a du sens, mais on y va ...
Je suis en train de construire un site responsive, cependantla version de bureau a déjà été faite. Et j'ai une image dans un wrapper div. Qui a un état de survol et affiche un test. Tout cela se fait via CSS.
Maintenant, sur la tablette, je veux pouvoir créer unliste déroulante pour le texte plutôt qu'un état de survol. Mais le problème, c’est lorsque je survole la div que je dois cliquer sur la version de la tablette (largeur maximale: 1024 pixels) pour afficher le contenu. Mais je veux seulement montrer sur onClick de la jQuery.
Voici le site CSS qui est défini sur le site lui-même:
.textHoverWrapOne:hover div.block-50_textHoverOne, .textHoverWrapTwo:hover div.block-50_textHoverTwo, .textHoverWrapThree:hover div.block-50_textHoverThree,.textHoverWrapFour:hover div.block-50_textHoverFour, .textHoverWrapFive:hover div.block-50_textHoverFive, .textHoverWrapSix:hover div.block-50_textHoverSix{
visibility: visible;
opacity: 1;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
Je veux pouvoir supprimer les styles pour letablette et rien de plus petit. Mais je n'arrive pas à les effacer. La seule façon de le faire est de supprimer la classe avec jQuery sur les appareils mobiles / tablettes, mais cela semble beaucoup trop compliqué.
Existe-t-il un moyen de paramétrer les styles pour qu'ils n'apparaissent que sur des éléments supérieurs à 1024 pixels à l'aide de requêtes multimédia?
Réponses:
5 pour la réponse № 1@media screen and (min-width: 1024px) {
// your rules here
}
2 pour la réponse № 2
Très facilement:
@media (min-width: 1024px)