我有一个下拉列表,如下所示:
<div className="dropdown">
<button className="nav-btn pick-a-sort">PICK A SORT:</button>
<div className = "dropdown-content">
<button className="nav-btn" id = "bubble-sort" onClick = {()=>{this.bubbleSort()}}>BUBBLE SORT</button>
<button className="nav-btn" id = "selection-sort" onClick = {()=>{this.selectionSort()}}>SELECTION SORT</button>
<button className="nav-btn" id = "insertion-sort" onClick = {()=>{this.insertionSort()}}>INSERTION SORT</button>
<button className="nav-btn" id = "quick-sort" onClick = {()=>{this.quickSort()}}>QUICK SORT</button>
<button className="nav-btn" id = "merge-sort" onClick = {()=>{this.mergeSort()}}>MERGE SORT</button>
<button className="nav-btn" id = "bead-sort" onClick = {()=>{this.beadSort()}}>BEAD SORT</button>
<button className="nav-btn" id = "heap-sort" onClick = {()=>{this.heapSort()}}>HEAP SORT</button>
<button className="nav-btn" id = "radix-sort" onClick = {()=>{this.radixSort()}}>RADIX SORT</button>
</div>
</div>
我已经设置了CSS,以便当用户“悬停”在按钮“ PICK A SORT:”上时,列表可见
但是,单击任何按钮时,除非用户将光标移出,否则下拉列表仍然可见,因为光标仍悬停在列表上方。
单击下拉菜单中的按钮后,是否可以隐藏列表?
这是我的CSS:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .nav-btn{
display: block;
text-align: center;
width: 100%;
margin: 0 auto;
}
.dropdown:hover .dropdown-content {
display: block;
}
这是在线网站,您可以在其中查看问题。任何帮助是极大的赞赏!
您可以clicked
在onclick函数的.dropdown容器中添加一个类,然后添加以下CSS:
.dropdown.clicked:hover .dropdown-content {
display: none;
}
然后,您必须clicked
在某个时候删除该类,以使悬停效果再次起作用。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句