css - 没有淡入的淡出动画，在 CSS 代码中

Question

我有这个 CSS 代码要插入到我网站的自定义 CSS 字段中

这是我的需要:当我将鼠标悬停在购物车按钮上时，我希望该框立即出现，然后当我移开鼠标时，以 1.5 秒的动画淡出所以没有淡入动画，只有淡出动画

盒子选择器是:.header-cart.invisible

我先试过这个:

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

但我也有淡出和淡入。

我试过这个其他版本，带有过渡属性:

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

这一次，不再显示淡入效果，但动画现在会干扰我的按钮“添加到购物车”:当我点击它时，我的购物车框现在显示有 1.5 秒的延迟 ，而我希望它不显示任何内容

所以我尝试在添加到购物车按钮上添加更多代码以强制它立即显示购物车框，但我没有成功:

.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;
}

是否有人会碰巧有一个想法，以便从我的任何版本的代码中满足我的需要？

那就太好了，非常感谢:)

PS:我真的需要这段代码是 100% CSS，即使我知道使用 PHP 或 Javascript 会更有竞争力

Answer 1

when I hover on my cart button, I want the box to appear immediately, and then when I remove the mouse, to fade out with an animation of 1,5 sec So no fade-in animation, only fade-out animation

然后简单地为元素的正常状态指定 1.5s 持续时间的过渡(它将在 :hover 之后返回)，以及 0s 持续时间/否:hover 状态的转换。

div {
  margin: 1em;
  padding: 1em;
  border: 1px solid red;
}

div + div {
  opacity: 0;
  transition: 1.5s;
  color: #fff;
  background: #00f;
}

div:hover + div {
  opacity: 1;
  transition: none;
}

<div>hover me</div>
<div>whoop whoop</div>