Question

希望我的问题很清楚。

这是我的CSS组合框的一个非常简单的版本。我想我只是遗漏了一些小事，希望你可以帮忙。基本上我有一个容器Div，然后我有一个下拉Div，它保持右边的浮动按钮。在这个下拉列表中，我还有一个隐藏的菜单区，直到用户悬停浮动按钮Div。

我可以通过将鼠标悬停在下拉Div上来工作，因为菜单Div是它的孩子，但是我希望能够将鼠标悬停在按钮Div上，这是下拉Div和显示菜单Div的第一个孩子，这是dropdown div的第二个子节点而不是按钮div。

有没有办法实现这个目标？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">


#container {
position: relative;
background-color: #999999;
height: 31px;
width: 200px;
}

#container #dropdown {
background-color: #999999;
height: 31px;
width: 200px;
}

#container #dropdown #button {
float: right;
background: #555555 url('assets/img/ddw.png') no-repeat center;
height: 25px;
width: 25px;
margin-top: 3px;
margin-right: 3px;
}

#container #dropdown #button:hover #menu  {
display: block;
float: right;
background: #555555 url('assets/img/ddw.png') no-repeat center;
height: 25px;
width: 25px;
margin-top: 3px;
margin-right: 3px;

}

#container #dropdown #menu {
display: none;
position: absolute;
background-color: #777777;
top: 32px;
height: 200px;
width: 200px;
}


</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
</head>
<body>

<div id="container">

<div id="dropdown">

<div id="button"></div>
<div id="menu">
Option 1
<br/>
Option 2
<br/>
Option 3
</div>
</div>



</div>


</body>
</html>

Answer 1

由于#menu位于#button之后，您可以使用相邻的兄弟选择器（+）而不是后代选择器（空格）：

#container #dropdown #button:hover + #menu  {
display: block;
float: right;
background: #555555 url('assets/img/ddw.png') no-repeat center;
height: 25px;
width: 25px;
margin-top: 3px;
margin-right: 3px;

}

Answer 2

尝试将div#menu放入div#button。然后，为div#menu提供以下属性：position: relative，display: block和top: 25px。给button div overflow: hidden。然后，将#container #dropdown #button:hover #menu选择器更改为#container #dropdown #button:hover，并为其提供以下属性：width: auto，height: auto，overflow: visible。有关工作示例，请参阅此jsFiddle：http://jsfiddle.net/kzEek/

CSS。父母＆gt; Child1：悬停。如何显示Parent＆gt; CHILD2？

2 个答案: