Consider the following code below, with list items and a delete link next to each. I want to have it so only the hovered link item shows the delete button, not all of them. See below for a demonstration of the issue:

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

.todo-list__delete {
  display: none;
}

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

```html
<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>
```

Seems like a simple issue but what would be the best way to target the active hovered element in CSS?