CSS实现仅淡出无淡入动画：购物车悬浮交互需求

Hey there! I've run into this exact issue before—getting hover show/hide behavior right without unwanted transitions can be tricky, but let's nail it down.

The Problem with Your Previous Attempts #

• If you added transition directly to the .header-cart.invisible class, it would apply to both the show (opacity 0 → 1) and hide (1 → 0) states, which is why you saw a fade-in.
• If you tried removing the transition but still had issues, it's likely because you didn't separate the "instant show" state from the "fade-out" transition properly.

The Fix: Target Transition Only on Hide #

Here's the CSS that will do exactly what you want:

First, let's assume your HTML structure looks something like this (adjust class names if yours are different):

<div class="cart-container">
  <button class="cart-button">🛒 Cart</button>
  <div class="header-cart invisible">
    <!-- Cart items go here -->
  </div>
</div>

Now the CSS:

/* 1. Initial hidden state: No transition here (instant hide by default) */
.header-cart.invisible {
  opacity: 0;
  visibility: hidden;
  /* Critical: No transition property here */
}

/* 2. On hover: Instantly show the cart, AND add the fade-out transition */
.cart-container:hover .header-cart.invisible {
  opacity: 1;
  visibility: visible;
  /* Only apply transition to opacity for the fade-out */
  transition: opacity 1.5s ease;
}

/* 3. Optional: Ensure cart stays unclickable after fade-out */
.header-cart.invisible:not(:hover) {
  /* Delay visibility change until fade-out completes */
  transition: visibility 0s 1.5s, opacity 1.5s ease;
}

How This Works #

• Instant Show: When you hover over the cart container, we flip opacity to 1 and visibility to visible immediately—since there's no transition on the initial hidden state, there's no fade-in.
• Smooth Fade-Out: By adding the transition property only when the cart is visible (via the hover selector), the transition only kicks in when the hover ends and the cart reverts to its hidden state.
• Fix Clickability: The optional third rule ensures that visibility doesn't switch to hidden until the 1.5s fade-out is done, so users don't accidentally click the cart while it's fading.

If Your HTML Structure Is Different #

If your cart button and cart container aren't nested in a parent div, use the adjacent sibling selector instead:

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

.header-cart.invisible:not(:hover) {
  transition: visibility 0s 1.5s, opacity 1.5s ease;
}

That should solve your problem—no more unwanted fade-in, just a clean 1.5s fade-out when you move your mouse away!

内容的提问来源于stack exchange，提问作者Pascal