html - 如何使悬停的元素处于活动状态
问题描述
如何使悬停的元素保持不变。正如您在代码笔中看到的那样,如果我将鼠标悬停在“服务”上,它会显示内容,但是当我尝试单击内容时,它会消失。
索引.html
.list {
display: flex;
flex-direction: column;
width: 100px;
}
.list .item {
padding: 10px;
font-size: 24px;
font-weight: normal;
background-color: #ccc;
cursor: pointer;
}
.list .item:hover {
text-decoration: underline;
}
.list .item.item-dropdown {
position: relative;
}
.list .item.item-dropdown:hover .dropdown-content {
display: block;
}
.list .dropdown-content {
display: none;
position: absolute;
left: 120px;
bottom: -20px;
padding: 5px 20px;
background-color: #ccc;
}
.list .dropdown-content:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-right: 14px solid #ccc;
border-bottom: 17px solid transparent;
margin-left: -8px;
top: 45%;
left: -5%;
}
<div class="list">
<div class="item">Home</div>
<div class="item">About</div>
<div class="item item-dropdown">Services
<div class="dropdown-content">
<div class="item">Home</div>
<div class="item">About</div>
</div>
</div>
</div>
注意:我还看到,有时它可以工作,有时当你从喙上悬停时它可以工作,但当尝试将鼠标悬停在喙外时它不会。
解决方案
实现这一点的一种方法是将您的菜单项包装在一个带有左边距的元素中。
.list {
display: flex;
flex-direction: column;
width: 100px;
}
.list .item {
padding: 10px;
font-size: 24px;
font-weight: normal;
background-color: #ccc;
cursor: pointer;
}
.list .item:hover {
text-decoration: underline;
}
.list .item.item-dropdown {
position: relative;
}
.list .item.item-dropdown:hover .dropdown-content {
display: block;
}
.list .dropdown-content {
display: none;
position: absolute;
left: 100px;
bottom: -20px;
}
.list .dd-menu{
position:relative;
margin-left:20px;
background-color: #ccc;
padding: 5px 20px;
}
.list .dd-menu:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-right: 14px solid #ccc;
border-bottom: 17px solid transparent;
margin-left: -8px;
top: 45%;
left: -5%;
}
<div class="list">
<div class="item">Home</div>
<div class="item">About</div>
<div class="item item-dropdown">Services
<div class="dropdown-content">
<div class="dd-menu">
<div class="item">Home</div>
<div class="item">About</div>
</div>
</div>
</div>
</div>
直接absolute
定位的孩子在它之前不应该有任何边距以使悬停成为可能。
推荐阅读
- rust - `FuturesUnordered` 不满足`Stream`?
- javascript - 如何使 div 闪烁光标?反应
- amazon-web-services - 在 EKS + Fargate 节点中运行的容器的卷挂载超时
- python - 我究竟做错了什么。谷歌启动 2020
- python - 在 Docker 拉取之后定位目录
- mapbox - 估算 Mapbox 瓦片处理成本
- javascript - React TypeError:postCompany 不是函数
- django - 视图的 Django REST API 最佳实践
- apache-spark - JsonMappingException 的原因可能是什么?
- c++ - QT:如何在布局中同步 QtableViews?