html - 如何定位我悬停的元素而不是 css 中的所有列表层次结构

Question

当我独立地悬停在每个元素上时，我想显示“图标”。问题是每当我将鼠标悬停在子项上时，父项也会显示其图标。

.list {
  width: 150px;
  height: 19px;
}
.list >.item {
  background-color: #c3c3c3;
  display: block;
  margin-bottom: 40px;
  margin-top: 12px;
  border: 1px solid black;
  color: white;
  height: 30px;
}
.list .item .content {
  position: relative;
  width: 100px;
  float: left;
  display: block;
}
.list .item .actions {
  position: relative;
  color: red;
  visibility: hidden;
}
.list .item:hover .actions {
  visibility: visible;
  cursor: pointer;
}

<ol class="list">
  <li class="item">
    <div class="content">
      <span>1- Hi...</span>
    </div>
    <div class="actions">
      <span class="icon">Icon 1</span>
    </div>
    <ol class="list">
      <li class="item">
        <div class="content">
          <span>a- Hi 2...</span>
        </div>
        <div class="actions">
          <span class="icon">Icon 2</span>
        </div>
      </li>
    </ol>
  </li>
  <li class="item">
    <div class="content">
      <span>2- Hi 3...</span>
    </div>
    <div class="actions">
      <span class="icon">Icon 3</span>
    </div>
  </li>
</ol>

如何使用 CSS 实现这一点？

Answer 1

您可以使用额外的 div 作为每个元素的包装器:

.list {
  width: 150px;
  height: 19px;
}
.list >.item {
  background-color: #c3c3c3;
  display: block;
  margin-bottom: 40px;
  margin-top: 12px;
  border: 1px solid black;
  color: white;
  height: 30px;
}
.list .item .content {
  position: relative;
  width: 100px;
  float: left;
  display: block;
}
.list .item .actions {
  position: relative;
  color: red;
  visibility: hidden;
}
.list .item-wrapper:hover>.actions {
  visibility: visible;
  cursor: pointer;
}

<ol class="list">
  <li class="item">
    <div class="item-wrapper">
      <div class="content">
        <span>1- Hi...</span>
      </div>
      <div class="actions">
        <span class="icon">Icon 1</span>
      </div> 
    </div>
    <ol class="list">
      <li class="item">
        <div class="item-wrapper">
          <div class="content">
            <span>a- Hi 2...</span>
          </div>
          <div class="actions">
            <span class="icon">Icon 2</span>
          </div> 
        </div>
      </li>
    </ol>
  </li>
  <li class="item">
    <div class="item-wrapper">
      <div class="content">
        <span>2- Hi 3...</span>
      </div>
      <div class="actions">
        <span class="icon">Icon 3</span>
      </div> 
    </div>
  </li>
</ol>