Menu

CSS - Fade out with no fade in animations

Pascal29992 24 Messages postés lundi 6 novembre 2017Date d'inscription 3 février 2018 Dernière intervention - 3 févr. 2018 à 22:48 - Dernière réponse :  PascalDEGUT
- 8 févr. 2018 à 21:25
Bonjour,
Je crée un code CSS à mettre en CSS personnalisé dans ma boutique

Voici mon besoin : quand je survole mon bouton "panier", je veux qu'une boîte contenant mon panier s'affiche immédiatement et disparaisse au bout de 1.5s quand j'enlève la souris.

J'ai essayé cette première ébauche de code :

.header-cart.invisible {
    transition: 1.5s;
}
.header-cart.invisible:hover {
    visibility: visible;
    opacity: 1;
}


Mais le fondu s'applique au fade-in également.

J'ai donc essayé une deuxième version.
Cette fois-ci, la transition fade-in ne s'affiche plus, en revanche mon panier s'affiche avec 1.5 seconde de délai lorsque je clique sur mon bouton "Ajouter au panier"

J'ai donc essayé de rajouter du code supplémentaire, en vain :

.header-cart.invisible {
    transition: 0s 1.5s, opacity 1.5s linear;
}
.header-cart.invisible:hover {
    visibility: visible;
    opacity: 1;
}
#add_to_cart_btn.button:active > .header-cart.invisible {
    visibility: visible;
    opacity: 1;
    transition: 0s 0s !important;
    transition-delay: 0s !important;
}



Quelqu'un aurait une idée pour résoudre ces petits problèmes, par l'une ou l'autre solution ?

Ce serait génial, merci par avance ! :)
Afficher la suite 

1 réponse

Répondre au sujet
+1
Utile
Pas d'idées ?

Est-ce que quelque chose n'est pas clair dans mes explications à tout hasard ?

Merci pour votre retour :)
Commenter la réponse de PascalDEGUT