CSS - Fade out with no fade in animations

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 ! :)