html - CSS - 多个元素显示处于悬停状态的子项

Question

考虑下面的代码，列表项和每个旁边的删除链接。我想要它，所以只有悬停的链接项显示删除按钮，而不是全部。请参阅下面的问题演示:

.todo-list {
  list-style-type: square;
}

.todo-list__delete {
  display: none;
}

.todo-list:hover .todo-list__delete {
  display: inline-block;
}

<ul class="todo-list">
    <li>
      Item 1
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
    <li>
      Item 2
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
    <li>
      Item 3
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
  </ul>

这似乎是一个简单的问题，但在 CSS 中定位事件悬停元素的最佳方式是什么？

Answer 1

这边？

.todo-list {
  list-style-type: square;
}

.todo-list__delete {
  display: none;
}

li:hover .todo-list__delete {
  display: inline-block;
}

<ul class="todo-list">
    <li>
      Item 1
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
    <li>
      Item 2
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
    <li>
      Item 3
      <a class="todo-list__delete" href="#">Delete</a>
    </li>
  </ul>