用css悬停在锚点时显示div？

Question

你好,div.cart-dropdown当我将鼠标悬停在上面时,我正在展示购物车内容a.cart-button.

我可以制作div节目但是当鼠标移出锚点时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>

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

我必须使用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