如何禁用div的点击事件但保留hover效果？

我之前也踩过这个坑——pointer-events:none确实会把点击和hover一起禁用，因为它直接让元素完全不响应任何鼠标事件。下面给你几个可行的方案，按需选择：

方案一：JavaScript阻止点击事件（最直接省心） #

这个方法不用大改CSS，只给目标div绑定点击事件，直接阻止它的行为和冒泡，这样点击彻底失效，但hover样式完全不受影响。

原生JavaScript写法： #

// 选中你要处理的div
const targetDiv = document.querySelector('.your-div-class');
// 绑定点击事件，阻止所有动作
targetDiv.addEventListener('click', function(e) {
  e.preventDefault(); // 阻止默认行为（比如div里有链接的话不会跳转）
  e.stopPropagation(); // 避免触发父元素的点击事件
});

jQuery写法（如果你的项目用jQuery）： #

$('.your-div-class').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  return false; // 这一步也能起到双重阻止的作用
});

设置后，div的hover样式（比如背景色变化、文字变色）依然正常触发，用户悬停时能看到效果，但点击div不会有任何反应。

方案二：纯CSS实现（无脚本依赖） #

如果不想引入JS，可以用父容器配合pointer-events的技巧，让hover效果和点击禁用分离：

示例代码： #

<div class="div-wrapper">
  <div class="target-div">我是要禁用点击但保留hover的div</div>
</div>

/* 让父容器响应hover，触发子div的样式变化 */
.div-wrapper:hover .target-div {
  background-color: #f0f0f0;
  color: #222;
  /* 你的其他hover样式 */
}

/* 子div禁用点击，但hover由父容器触发，所以依然生效 */
.target-div {
  pointer-events: none;
}

需要注意的是，父容器的大小要和子div匹配（或者至少覆盖子div的区域），这样hover才能准确触发。

方案三：保留内部元素点击的特殊场景 #

如果你的div内部还有按钮、链接等需要点击的元素，只想禁用div本身的点击，可以这样设置：

/* 禁用div本身的点击 */
.target-div {
  pointer-events: none;
}

/* 让内部需要点击的元素恢复响应 */
.target-div .clickable-item {
  pointer-events: auto;
}

这种情况的hover样式依然需要用方案二的父容器触发，避免pointer-events:none影响hover效果。

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