Question

我有一个按钮女巫只有当父（parent-class）元素悬停时才会显示。父类有position:relative，按钮有absolute:position。它工作正常。

现在我希望只有当我点击按钮时才会出现下拉列表。

我尝试将absolute:position和display:none设置为下拉列表类，并仅在我按下按钮时显示下拉列表。但它没有用。

这是一个示例代码：

<div class="parent-class">
   <button class="btn" >button</button>
   <ul class="dropdown-list">
    <li > content1</li>
    <li > content1</li>
   </ul>
</div>

.parent-class{
 position: relative;
}

.parent-class:hover .btn{
 display:block;
}

.btn{
 position:absolute;
 display:none;
}

.btn:focus .dropdown-list{
 display: block;
}

.dropdown-list{
position: absolute;
display: none;
}

我也使用了Angular 2，所以如果有办法用角度2解决这个问题，那将是完美的

Answer 1

您的问题是，当您使用.btn:focus .dropdown-list时，您希望.dropdown-list元素是.btn元素的子元素（在您的情况下 - 它们不是）。 .dropdown-list是.btn的兄弟元素。

您可以使用~（兄弟选择器）：

来解决此问题

＆＃13;

.parent-class{
  position: relative;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

.parent-class:hover .btn{
  display:block;
}

.btn{
  position:absolute;
  display:none;
}

.btn:focus ~ .dropdown-list{
  display: block;
}

.dropdown-list{
  position: absolute;
  display: none;
}

＆＃13;

<div class="parent-class">
  <button class="btn" >button</button>
  <ul class="dropdown-list">
    <li > content1</li>
    <li > content1</li>
  </ul>
</div>

＆＃13;

专注于绝对元素

1 个答案: