html - 即使您没有将鼠标放在下拉菜单上，下拉菜单也是可见的

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

发生了什么

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

当前选择器:

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

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

代码

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