我刚刚创建了一个带有下拉菜单的按钮,您可以查看演示 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;
}
最佳答案
发生了什么
这里的问题真的不是问题,因为一切都在按预期进行。当您将鼠标悬停在容器上时,子项可见。然后 child 可见, parent 变得更大以包含它。
当前选择器:
要解决此问题,您有几个选择。最简单的方法是使用兄弟选择器而不是父选择器。选择 .shopping-cart-wrapper
中的 a
而不是 .shopping-cart-wrapper
本身,并使用 +
兄弟选择器。
但我们必须小心,因为我们希望当鼠标悬停在其自身上时子项保持可见。当使用父级作为选择器时,这是自动的。对于 sibling ,我们必须手动执行此操作。我们将同时使用兄弟 和 child 本身作为选择器。
代码
当前:
.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;
}
更多信息
关于html - 即使您没有将鼠标放在下拉菜单上,下拉菜单也是可见的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22487731/