Question

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

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

这是代码

＆＃13;

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

＆＃13;

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

＆＃13;

如何在鼠标移出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

Answer 2

尝试使用此代码，它可能会对您有所帮助

.cart-button {
    position: relative;
    display: inline-block;
}

.cart-dropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.cart-button:hover .cart-dropdown {
    display: block;
}

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

Answer 3

您可以在mouseover事件中添加css类，将显示块添加到cart-dropdown的div中：

<script type="text/javascript">
$(".cart-button").one("mouseover", function() {
    $(".cart-dropdown").addClass('permahover');
});
</script>

<style>
.permahover{
    display: block;
}
</style>

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

3 个答案: