即使您没有鼠标在下拉菜单上，下拉菜单也是可见的 [英] dropdown menu is visible even if you don't have your mouse on the dropdown menu

问题描述

我刚刚创建了带有下拉菜单的按钮，您可以在此处观看演示.

I just created a button with a dropdown menu, you can view the demo here.

在演示中，我在shopping-cart-wrapper元素中添加了黑色背景，以便您查看问题出在哪里.

In the demo I added a black background to shopping-cart-wrapper element so you can see where the problem lies.

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

The problem is when you hover over the button you can keep your mouse on the black background and the dropdown menu is still visible.

我只希望在将鼠标悬停在按钮上或将鼠标悬停在下拉菜单上时显示下拉菜单.

I only want the dropdown menu to be visible when you hover over the button or keep your mouse on the dropdown menu.

这是我的代码:

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;
    }  

推荐答案

发生了什么

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

What's Going On

The problem here really isn't a problem, because everything is working as it is supposed to. When you hover over the container, the child is visible. Then the child is visible, the parent becomes larger to encompass it.

要解决此问题，您有两种选择.最简单的方法是使用同级选择器而不是父级选择器.选择.shopping-cart-wrapper内部的a而不是.shopping-cart-wrapper本身，然后使用+兄弟选择器.

To fix this, you have a couple options. The easiest would be to use a sibling selector instead of a parent. Select the a inside .shopping-cart-wrapper instead of .shopping-cart-wrapper itself, and use the + sibling selector.

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

We've got to be careful though, because we want the child to stay visible when the mouse is hovering over itself. When using the parent as a selector, this is automatic. With a sibling, we have to manually do this. We'll use both the sibling and the child itself as selectors.

> 工作示例

当前:

.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

这篇关于即使您没有鼠标在下拉菜单上，下拉菜单也是可见的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！