.cartBtn {
  appearance: none;
  outline: none;
  border: none;
  cursor: pointer;
  text-align: center;
  background-color: transparent;
  color: inherit;
}
.cartBtn:hover {
  color: black;
}

.cart {
  display: none;
  opacity: 0;
  transition: all 4s ease-in-out;
}

.cart-toggle:hover .cart {
  display: block;
  opacity: 1;
}

.cart-toggle {
  position: relative;
}

<button className={styled.cartBtn}>
          <h3>Cart</h3>
          <div className={styled.cart}>
            <Cart />
          </div>
        </button>
      </div>

我在导航栏中有一个按钮，当我悬停它时，我希望显示此购物车。购物车是一个包含一些项目的框，写为绝对位置。在文本和切换框之间有一个空格，当我试图悬停在框上时，我甚至无法到达它。因此，如果我可以放置一个过渡，我可以到达，但问题是我的过渡不工作。