jQuery在鼠标悬停时导致div消失

Question

HTML代码：

<div class = "navigation">
  <ul class = "nav">
    <li>Home</li>
    <li>Brands</li>
    <li>Designers</li>
    <li>Contact</li>
  </ul>
</div>

<div class = "sidebar">
  <ul class = "shopping-bag">
    <li>Cart</li>
    <div class = "cart-icon"></div>
  </ul>
  <span class = "empty-cart">No items in cart.</span>

  <h3 class = "cat-title">Categories</h3>
  <ul class = "categories">
    <li>
      <span class = "check-box"></span>
      New Arrivals
    </li>
    
    <li>
      <span class="check-box"></span>
        Accesories
    </li>
    <li>
      <span class = "check-box"></span>
        Bags
    </li>
    <li>
      <span class = "check-box"></span>
        Dressed
    </li>
    <li>
      <span class = "check-box"></span>
        Jackets
    </li>
    <li>
      <span class = "check-box"></span>
        jewelry
    </li>
    <li>
      <span class = "check-box"></span>
      Shoes
    </li>
    <li>
      <span class = "check-box"></span>
        Shirts
    </li>
    <li>
      <span class = "check-box"></span>
       Sweaters
    </li>
    <li>
      <span class = "check-box"></span>
        T-shirts
    </li>
  </ul>

  <h3 class = "cat-title">Colors</h3>
  <ul class = "colors">
    <li class = "inline">
      <span class = "color-box" style = "background:#eae3d3;"></span>
        Beige
    </li>
    <li class = "inline">
      <span class = "color-box" style = "background:#999;"></span>
        Grey
    </li>
    <li class = "inline">
      <span class = "color-box" style = "background:#000;"></span>
        Blue
    </li>
    <li class = "inline">
      <span class = "color-box" style = "background:#6e8cd5;"></span>
        Blue
    </li>
    <li class = "inline">
      <span class = "color-box" style = "background:#b27ef8;"></span>
        Purple
    </li>
    <li class = "inline">
      <span class = "color-box" style = "background:#D2691E;"></span>
        Brown
    </li>
    <li class = "inline">
      <span class = "color-box" style = "background:#f56060;"></span>
        Red
    </li>
    <li class = "inline">
      <span class = "color-box" style = "background:#44c28d;"></span>
        Green
    </li>
  </ul>
</div>

<div class = "content">
  <div class = "results">
    <p>Showing 1–9 of 48 results</p>
    <div class = "gallery">
      <div class = "image-1">
        <img src = "images/1.jpg" />
        <div class = "img-desc">
          <span class = "product-title">Fluted Hem Dress</span>
          <span class = "product-price">$39</span>
          <span class = "product-desc">Summer Dress</span>

          <div class = "product-options hide">
            <span class = "product-size">Sizes</span>
            <br>
            <span style = "color:#b1b1b3;">XS, S, M, L, XL, XXL</span>
            <br>
            <strong class = "color-options">colors</strong>
            <span class = "product-color" style = "background:#000;"></span>
            <span class = "product-color" style = "background:#44c28d;"></span>
            <span class = "product-color" style = "background:#b27ef8;"></span>
            <span class = "product-color" style = "background:#eae3d3;"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Codepen示例： https://codepen.io/jorda13456/pen/eGoyBp

我想要的效果在左边，但是右边有问题。

这里有一个GIF清晰地解释了问题：https://i.gyazo.com/e3d2f7d204037c297e76d06b40c0de08.mp4

我不确定解决方案是什么。我尝试了很多选项，但无论如何，我似乎仍然遇到同样的问题。

- Jordan Brown

---

将您的 CSS 过渡与左侧的过渡匹配。 - Brahma Dev

Answer 1

这种效果的出现是因为你立即对.product-options调用了hide()，但是你的动画需要200毫秒才能完成。因此，你需要在setTimeout中延迟200毫秒来包装这行代码。当然，这会导致另一个问题-这个块在滑动下来时仍然可见。为了解决这个问题，你需要在.image-1上添加overflow: hidden。

- Flying

Answer 2

您可以通过过渡高度来使其随着顶部的变化而改变。 transition: height 200ms ease-out, top 200ms ease-out;

- Photonic Bits