我有一个按钮女巫仅在父(父类
)元素悬停时显示。父类有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,所以如果有办法用 Angular 2 解决这个问题,那将是完美的
最佳答案
您的问题是,当您使用 .btn:focus .dropdown-list
时,您希望 .dropdown-list
元素成为 的子元素.btn
元素(在你的情况下 - 它们不是)。 .dropdown-list
是 .btn
的兄弟元素。
您可以使用 ~
(同级选择器)解决这个问题:
.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;
}
<div class="parent-class">
<button class="btn" >button</button>
<ul class="dropdown-list">
<li > content1</li>
<li > content1</li>
</ul>
</div>
关于javascript - 专注于绝对元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41740179/