寻求：鼠标hover时右上角显示删除X的可点击元素实现方案

你完全可以用<div>来实现这个需求，既保留点击事件，又能灵活控制样式，同时通过tabindex保证可访问性。下面是具体实现代码：

HTML结构 #

<div class="clickable-item" tabindex="0">
  这里是元素内容
  <button class="delete-btn" aria-label="删除该元素">×</button>
</div>

CSS样式 #

.clickable-item {
  position: relative;
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
  /* 模拟button的默认焦点样式，保证可访问性 */
  outline: none;
}

.clickable-item:hover .delete-btn {
  display: flex;
}

.delete-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background-color: #ff4444;
  color: white;
  font-size: 12px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* 可选：添加点击反馈 */
.clickable-item:active {
  background-color: #f5f5f5;
}

JavaScript逻辑 #

const clickableItems = document.querySelectorAll('.clickable-item');

clickableItems.forEach(item => {
  // 元素本身的点击事件
  item.addEventListener('click', (e) => {
    // 防止点击删除按钮时触发元素主点击事件
    if (e.target.classList.contains('delete-btn')) return;
    console.log('元素被点击');
    // 这里写入你的点击逻辑
  });

  // 删除按钮的点击事件
  const deleteBtn = item.querySelector('.delete-btn');
  deleteBtn.addEventListener('click', () => {
    item.remove();
  });

  // 支持键盘回车触发点击，保证无障碍访问
  item.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      item.click();
    }
  });
});

关于是否用button的说明 #

如果这个元素的核心功能不是表单提交或纯粹的按钮操作，用<div>确实更贴合语义，但必须加上tabindex="0"让它能被键盘聚焦，同时补充键盘触发逻辑，避免无障碍访问问题。

如果执意要用<button>，注意HTML标准不允许按钮嵌套按钮，所以只能把删除按钮放在button外面，通过定位实现悬浮效果，反而不如用div灵活。

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