jquery - 使用 css 将鼠标悬停在 anchor 上时显示 div？

Question

你好，当我将鼠标悬停在 a.cart-button 上时，我正在努力显示购物车内容 div.cart-dropdown。

我可以显示 div，但是当鼠标移出 anchor a.cart-button 时，div.cart-dropdown 消失

这是代码

.cart-dropdown{
     display:none;
}

a.cart-button:hover + .cart-dropdown{
     display: block;
}

<a href="#" class="cart-button">Cart Button</a>

<div class="cart-dropdown">
  Cart dropdown content
</div>

当鼠标移出 a.cart-button 时，如何使 div.cart-dropdown 可见

我必须使用 jQuery 吗？

Answer 1

一个简单的解决方案是将两个元素放在一个包装器中，而不是显示同级元素，当 .cart-button 悬停时，在包装器悬停时显示一个子元素。

<div class="dropdown-wrapper">
    <a href="#" class="cart-button">Cart</a>

    <div class="cart-dropdown">
       Cart dropdown content
     </div>
</div>

.dropdown-wrapper:hover .cart-dropdown {
    display: block;
 }

这样，即使光标移动到下拉菜单，它仍然在 .dropdown-wrapper 中，并将菜单保留在 display: block