即使您没有鼠标在下拉菜单上，下拉菜单也可见

Question

我刚刚创建了一个带有下拉菜单的按钮，您可以查看演示here。

在演示中，我为shopping-cart-wrapper 元素添加了黑色背景，以便您查看问题所在。

问题是当您将鼠标悬停在按钮上时，您可以将鼠标保持在黑色背景上，并且下拉菜单仍然可见。

我只希望当您将鼠标悬停在按钮上或将鼠标停留在下拉菜单上时下拉菜单可见。

这是我的代码：

HTML：

   <div class="shopping-cart-wrapper">
    <a class="shopping-cart" href="#" alt="my-shopping-cart">My Shopping Cart (0)</a>
     <div class="shopping-cart-dropdown">
       <div class="empty-cart"><span>Your shopping cart is empty</span></div>
     </div>
   </div>

CSS：

    .shopping-cart-wrapper:hover .shopping-cart-dropdown {
      opacity: 1;
      display: block;
    }
    .shopping-cart-wrapper {
      display: inline-block;
        background: #000;
        margin-top: 5px;
        margin-left: 15px;


    }

    .shopping-cart {

      border: 1px solid #d3d3d3;
      color: #656565;
      padding-right: 10px;
      padding-top: 8px;  padding-bottom: 8px;
      padding-left: 40px;
      font-weight: bold;
      display: inline-block;
      font-size: 13px;  
      text-align: right;
      text-decoration: none;
      box-shadow: 0px 1px 0px #f2f2f2;
      background: #f8f8f8 url("http://placehold.it/32x32") no-repeat 0 0 ;
      position: relative;
    }


    .shopping-cart:hover { 
      background: #fff url("images/cart-sprite.png") no-repeat 0 -29px ; 
      color: #202020;
      border: 1px solid #c6c6c6;
      box-shadow: 0px 1px 0px #e5e5e5;
     }

    .shopping-cart-dropdown {
      opacity: 0;
      display: none;
      border: 1px solid #d3d3d3;
      padding-bottom: 80px;
      position: relative;
      right: 49px;
      width: 247px;
      background: #f6f6f6;
      font-size: 12px;
      font-weight: bold;
    }

    .empty-cart{
      background: #202020;
      padding: 10px;
      color: #fff;
      text-align: center;
      position: relative;
    }  

Answer 1

发生了什么

这里的问题真的不是问题，因为一切都按预期进行。当您将鼠标悬停在容器上时，孩子是可见的。然后孩子是可见的，父母变得更大以包含它。

当前选择器：

要解决此问题，您有几个选择。最简单的方法是使用兄弟选择器而不是父选择器。选择.shopping-cart-wrapper 中的a 而不是.shopping-cart-wrapper 本身，并使用+ 同级选择器。

但我们必须小心，因为我们希望当鼠标悬停在其自身上时孩子保持可见。当使用父级作为选择器时，这是自动的。对于兄弟姐妹，我们必须手动执行此操作。我们将使用兄弟和子本身作为选择器。

代码

Working Example

当前：

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

工作：

.shopping-cart-wrapper a:hover + .shopping-cart-dropdown,
.shopping-cart-dropdown:hover {
  opacity: 1;
  display: block;
}

更多信息

http://reference.sitepoint.com/css/adjacentsiblingselector