最近在研究一个关于js+div"鼠标悬停在li时显示删除按钮

实现鼠标悬停在li元素上显示删除按钮的功能可以通过以下步骤来实现：

实现步骤：

1. HTML结构：

   首先，在HTML中定义一个包含li元素的列表，并为每个li元素添加一个删除按钮的占位符。

   html
   复制代码
   <ul id="list">
       <li>Item 1 <span class="delete-btn">❌</span></li>
       <li>Item 2 <span class="delete-btn">❌</span></li>
       <li>Item 3 <span class="delete-btn">❌</span></li>
       <!-- 更多的li项目 -->
   </ul>
   

2. CSS样式：

   使用CSS将删除按钮隐藏起来，并在li元素悬停时显示出来。

   css
   复制代码
   .delete-btn {
       display: none; /* 隐藏删除按钮 */
   }
   
   li:hover .delete-btn {
       display: inline-block; /* 鼠标悬停时显示删除按钮 */
   }
   

3. JavaScript交互（可选）：

   如果需要对删除按钮进行交互，如点击删除按钮删除对应的li元素，可以通过JavaScript添加事件监听器。

   javascript
   复制代码
   // 获取所有的li元素
   const listItems = document.querySelectorAll('#list li');
   
   // 遍历每个li元素
   listItems.forEach(item => {
       // 找到当前li元素下的删除按钮
       const deleteBtn = item.querySelector('.delete-btn');
       
       // 添加点击事件监听器
       deleteBtn.addEventListener('click', () => {
           item.remove(); // 点击删除按钮时删除当前li元素
       });
   });
   

关键字总结：

鼠标悬停, li元素, 删除按钮, JavaScript交互, CSS样式, 事件监听器

通过上述步骤，你可以实现在鼠标悬停在li元素上时显示删除按钮的效果，并在需要时添加额外的JavaScript逻辑来处理按钮的交互行为。