Question

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

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

框选择器是：.header-cart.invisible

我先试过这个：

但我还有淡出和淡出。

我尝试了其他版本，其中包含transition属性：

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

这一次，淡入不再显示，但动画现在会干扰我的按钮＆＃34;添加到购物车＆＃34; ：当我点击它时，我的购物车框现在显示1.5秒延迟，而我希望它显示没有任何

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

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

有人会碰巧有一个想法，以便能够满足我的需求，从我的代码的任何版本开始吗？

非常好，非常感谢你：）

PS：我真的需要这个代码 100％CSS ，即使我知道使用PHP或Javascript会更具竞争力

Answer 1

当我将鼠标悬停在我的购物车按钮上时，我希望该框立即显示，然后当我移除鼠标时，以1.5秒的动画淡出所以没有淡入动画，只有淡出动画

然后只需为元素的正常状态指定1.5s持续时间的转换（它将在之后返回：hover），0s持续时间/否转换为：悬停状态。

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>

Answer 2

悬停购物车按钮时不添加转换，然后在悬停框div时添加缓出转换

＆＃13;

.header-cart.invisible {
    background-color:#000;
    color:#fff;
    opacity:0;
    padding:20px; 
    border:solid 1px #ddd;
    display:block;
}
.header-cart.invisible:hover {
    transition: opacity 1.5s ease-out;
}
#add_to_cart_btn.buton
{
   padding:20px; 
    border:solid 1px #ddd;
    display:block;
}
#add_to_cart_btn.button:hover + .header-cart.invisible {
    transition: none;
    opacity:1;
}

＆＃13;

<button id="add_to_cart_btn" class="button">
Cart Button - show box immediately
</button>

<button class="header-cart invisible">
Box - fade when hover
</button>

＆＃13;

Answer 3

首先，谢谢你的回复

我对＆＃34; +＆＃34;有点不熟悉登录选择器而且我不确定我完全理解＆＃34; div＆＃34;选择来自CBroe

但我已经从我理解的方法中尝试了两种方法

1）

{
  "name": "text",
  "type": "text",
  "required": false,
  "default": "Default",
  "flex": 50
},

所以使用这种方法，我没有淡入，也没有淡出。也许我的网站表现出另一种方式您可以尝试以下网址：https://www.tresor-ethnique.com/collections/tibetain/products/pendentif-arbre-de-vie

我注意到你的代码剪掉了一个问题（根据我的需要）是＆＃34;呐喊＃34;在我徘徊的时候消失了

2）

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

所以使用这种方法，我有淡入但没有淡出。

正好与我想要的相反......我几乎用其他方法做同样的事情

也许我的网站可能会以某种方式行事

根据您的代码段，这不完全是我想做的事（对不起，如果不清楚）

我想：

如果悬停＆＃34;购物车按钮＆＃34;然后框立即出现=＆gt;确定
如果悬停＆＃34; Box＆＃34;盒子还在这里=＆gt;你的代码片段不行，它会随着1.5s动画而消失
如果从＆＃34; Box＆＃34;中删除那么1.5s animation =＆gt;在您的代码段上不行，它会立即消失
如果从＆＃34;购物车按钮＆＃34;中删除那么1.5s animation =＆gt;在您的代码段上不行，它会立即消失

我希望现在更清楚了:)）

在CSS代码中淡出动画而不淡入

3 个答案: