为什么:not()伪类无法排除子元素以取消hover效果？

你的HTML代码： #

<div class='card'>
  <div class='upper-body"> .. </div>
  <div class="lower-body"> .. </div>
</div>

注：这里upper-body的引号写法有误，应该修正为class='upper-body'或class="upper-body"

需求： #

• 鼠标悬停upper-body区域时，整个card显示指定边框
• 鼠标悬停lower-body（底部按钮）时，card边框无变化
• upper-body占据card的整体区域

你尝试的SCSS代码： #

.card { 
  &:hover:not(.lower-body) { 
    cursor: pointer;
    border-color: #0A8276;
  }
}

失效原因： #

你写的:not(.lower-body)是在筛选本身带有.card类的元素，而不是筛选鼠标悬停的目标元素。

因为事件冒泡机制，当鼠标悬停在子元素lower-body上时，hover事件会向上冒泡到父元素card，此时card的:hover状态依然会被触发——你的:not选择器根本没作用在子元素上，所以不管悬停哪个子元素，card都会触发hover样式。

解决方案： #

因为upper-body占据card整体区域，推荐两种可行方案：

方案1：CSS变量+子元素hover（纯CSS实现）

利用upper-body覆盖整个card的特性，给upper-body设置hover时修改card的CSS变量，同时保证lower-body可点击：

.card {
  border: 1px solid var(--card-border, #ccc); /* 默认边框色 */
  position: relative;
}
.upper-body {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.upper-body:hover {
  --card-border: #0A8276;
  cursor: pointer;
}
.lower-body {
  position: relative;
  z-index: 1; /* 确保按钮在upper-body上方 */
  pointer-events: auto; /* 保证按钮可交互 */
}

方案2：JavaScript判断hover目标

通过事件监听判断鼠标悬停的元素，精准控制card的样式：

const card = document.querySelector('.card');

card.addEventListener('mouseover', (e) => {
  // 判断当前悬停的元素是否是lower-body或其后代
  if (!e.target.closest('.lower-body')) {
    card.style.borderColor = '#0A8276';
    card.style.cursor = 'pointer';
  }
});

card.addEventListener('mouseout', () => {
  card.style.borderColor = '';
  card.style.cursor = '';
});

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