即使您没有将鼠标放在该下拉菜单上,该下拉菜单也是可见的 [英] 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
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屋!