点击后左滑显示删除按钮怎么做html

这个功能可以通过 CSS 和 JavaScript 实现。以下是一种实现方式：

1. 首先，使用 CSS 定义一个带有删除按钮的 div 元素，并将其设置为隐藏状态：

.delete-button {
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background-color: red;
  text-align: center;
  line-height: 30px;
  color: white;
  cursor: pointer;
  display: none;
}

2. 在需要添加删除按钮的元素中，添加一个包含删除按钮的 div 元素，并将其作为子元素插入到需要的位置：

<div class="item">
  <span>这是一个条目</span>
  <div class="delete-button">X</div>
</div>

3. 使用 JavaScript 监听鼠标悬停事件，当鼠标悬停在元素上时，显示删除按钮：

const item = document.querySelector('.item');
const deleteButton = item.querySelector('.delete-button');

item.addEventListener('mouseenter', () => {
  deleteButton.style.display = 'block';
});

item.addEventListener('mouseleave', () => {
  deleteButton.style.display = 'none';
});

这样，当鼠标悬停在元素上时，就会显示删除按钮，当鼠标离开元素时，删除按钮会隐藏。你可以根据需要调整 CSS 样式和 JavaScript 代码以适应你的具体情况。