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

问题描述

我刚刚创建了带有下拉菜单的按钮，您可以在

当前:

  .shopping-cart-wrapper:hover .shopping-cart-dropdown {不透明度:1；显示:块；} 

工作:

  .shopping-cart-wrapper a:hover + .shopping-cart-dropdown，.shopping-cart-dropdown:hover {不透明度:1；显示:块；} 

其他信息

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

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

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.

Here is the code I have:

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.

Current Selector:

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.

Code

Working Example

Current:

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

Working:

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

Further Information

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

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