实现div hover时显示隐藏<a>元素的技术方案咨询

你可以通过纯CSS实现这个交互效果，不需要额外JavaScript，步骤如下：

1. 编写核心CSS样式 #

默认隐藏.div-for-listing容器内的<a>元素，当鼠标悬停在容器上时，将它们设置为可见：

/* 默认隐藏容器内的a元素 */
.div-for-listing a {
    display: none;
}

/* 鼠标悬停容器时显示a元素 */
.div-for-listing:hover a {
    display: inline-block; /* 可根据布局需求换成inline */
}

2. 修正HTML的id重复问题 #

注意你的循环代码里，每个删除按钮的<i>标签都用了相同的id="delete-button"，而HTML中id必须唯一，建议改成class避免冲突：

<div class="task-list">
  <ul>
    {% for i in list %}
    <li class="todo-listing">
      <div class="div-for-listing">
        <form class="form-list" action="{{url_for('to_do_list')}}" method="post">
          <input class="checkbox-list" type="checkbox" id="list-{{i.id}}" name="list-{{i.id}}" value="ongoing" onclick="toggle_check()">
          <label class="todo-listing-data" for="list-{{i.id}}"> {{i.task}}</label>
          <a href=""></a>
          <!-- 将id改为class，避免重复 -->
          <a href="#"><i class="fa-sharp fa-solid fa-xmark delete-button"></i></a>
          <br>
        </form>
      </div>
    </li>
    {% endfor %}
  </ul>
</div>

3. 可选：只显示特定的元素 #

如果你只想显示删除按钮对应的<a>，可以调整CSS选择器，精准定位目标元素：

方案一：使用:has()伪类（现代浏览器支持） #

.div-for-listing a:has(.delete-button) {
    display: none;
}

.div-for-listing:hover a:has(.delete-button) {
    display: inline-block;
}

方案二：给目标单独加class（兼容所有浏览器） #

先修改HTML：

<a href="#" class="delete-link"><i class="fa-sharp fa-solid fa-xmark"></i></a>

再写对应CSS：

.div-for-listing .delete-link {
    display: none;
}

.div-for-listing:hover .delete-link {
    display: inline-block;
}

这种纯CSS方案性能高、代码简洁，完全满足你的交互需求。

内容的提问来源于stack exchange，提问作者Mars