不带淡入的淡出动画，在CSS代码中

我有这个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会更有竞争力

当我将鼠标悬停在购物车按钮上时，我希望长方体立即出现，然后当我移除鼠标时，以1,5秒的动画淡出，因此没有淡入动画，只有淡出动画

然后简单地为元素的正常状态指定1.5s的持续时间转换（它将在：hover之后返回到该状态），为：hover状态指定0s的持续时间/无转换

div{
边缘：1米；
填充：1em；
边框：1px纯红；
}
div+div{
不透明度：0；
过渡：1.5s；
颜色：#fff；
背景：#00f；
}
div：悬停+div{
不透明度：1；
过渡：无；
}

将鼠标悬停在我身上
呼呼呼呼

只需在鼠标悬停购物车按钮时不添加过渡，然后在鼠标悬停box div时添加减缓过渡

.header-cart.invisible{
背景色：#000；
颜色：#fff；
不透明度：0；
填充：20px；
边框：实心1px#ddd；
显示：块；
}
.标题购物车.不可见：悬停{
过渡：不透明度1.5s缓解；
}
#添加到购物车中
{
填充：20px；
边框：实心1px#ddd；
显示：块；
}
#添加到购物车按钮：悬停+标题-购物车不可见{
过渡：无；
不透明度：1；
}

购物车按钮-立即显示箱子
框-悬停时淡入淡出

首先，感谢您的回复

我对“+”登录选择器有点不熟悉 我不确定我是否完全理解CBroe的“div”选择器

但根据我的理解，我已经尝试了你的两种方法

(一)

所以用这个方法，我没有淡入和淡出。 也许我的网站表现出另一种方式 您可以尝试以下URL：

我注意到你的代码被截取（基于我的需要）的一个问题是，尽管我在上面悬停，“呜呜呜”也会消失

(二)

所以用这个方法，我有淡入，但没有淡出

正是我想要的相反。。。我用其他方法也差不多

也许我的网站也会以某种方式运行

根据您的代码片段，这并不完全是我想要做的（如果不清楚，很抱歉）

我想：

• 如果将鼠标悬停在“购物车按钮”上，则框立即出现=>OK

• 如果将鼠标悬停在“Box”上，那么Box仍然在这里=>代码段上不正常，它会随着1.5s动画消失

• 如果从“框”中删除，则代码段上的1.5s动画=>不正常，它会立即消失

• 如果从“购物车按钮”中删除，则代码段上的1.5s动画=>不正常，它会立即消失

我希望这一点现在更清楚：）

如果您希望我们提供帮助，您需要添加一个示例

  .header-cart.invisible {
    position: fixed !important;
    top: 25px !important;
    transition: transition 1.5s !important;
  }
  .header-cart.invisible:hover {
    visibility: visible;
    opacity: 1;
  }
  #add_to_cart_btn.button:active + .header-cart.invisible {
    visibility: visible;
    opacity: 1;
    transition: none !important;
  }

  .header-cart.invisible {
    position: fixed !important;
    top: 25px !important;
    transition: opacity 1.5s ease-out !important;
  }
  .header-cart.invisible:hover {
    visibility: visible;
    opacity: 1;
  }
  #add_to_cart_btn.button:active + .header-cart.invisible {
    visibility: visible;
    opacity: 1;
    transition: none !important;
  }