如何使悬停元素处于活动状态

Question

如何让悬停的元素保持不变。正如您在 codepen 中看到的，如果我将鼠标悬停在“服务”上，它会显示内容，但当我尝试单击该内容时，它会消失。

index.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>

注意：我还看到，当您将鼠标悬停在喙上时，它有时会起作用，有时却不起作用，但是当尝试将鼠标悬停在喙外时，它却不起作用.

Answer 1

实现此目的的一种方法是将菜单项包装在具有 margin-left 的元素中。

.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 定位 child 之前不应有任何边距以使悬停成为可能。

Answer 2

您可以将其添加到您的 scss 代码中

.dropdown-content:hover {
  display: block;
}

Working example

如何使悬停元素处于活动状态

How do I make the hovered element to be active

html

css

styles

sass

styling