如何实现父元素hover生效但子输入框hover时禁用该效果

针对你提出的两个需求，分别给出实现方案：

一、鼠标悬停input时禁用父元素hover效果 #

可以利用CSS的:has()伪类实现纯CSS方案，不需要额外JS。修改原CSS的hover规则即可：

.parent {
  height: 200px;
}

.title {
  user-select: none;
}

/* 仅当父元素悬停且内部input未被悬停时，才显示绿色背景 */
.parent:hover:not(:has(input:hover)) {
  background: green;
}

原理：:has(input:hover)会匹配包含被悬停input的父元素，再通过:not()排除这种情况，这样只有当鼠标悬停在父元素的非input区域时，才会触发背景变绿的效果。

二、根据光标样式自动禁用hover效果 #

这个需求需要结合JavaScript实现，因为CSS无法直接检测光标样式。步骤如下：

1. 先修改CSS，新增一个用于禁用hover的类：

.parent {
  height: 200px;
}

.title {
  user-select: none;
}

.parent:hover {
  background: green;
}

/* 禁用hover效果的类，覆盖原有样式 */
.parent.no-hover:hover {
  background: transparent;
}

2. 添加JavaScript逻辑，监听鼠标移动并判断光标样式：

document.addEventListener('mousemove', (e) => {
  const parent = document.querySelector('.parent');
  // 获取当前鼠标指向元素的光标样式
  const currentCursor = window.getComputedStyle(e.target).cursor;
  
  // 当光标为text或default（可根据需求调整判断条件）时，禁用hover
  if (currentCursor === 'text' || currentCursor === 'default') {
    parent.classList.add('no-hover');
  } else {
    parent.classList.remove('no-hover');
  }
});

说明：这段代码会实时检测鼠标指向元素的光标样式，当样式为text（比如输入框、可选中文本的元素）或default（默认箭头光标）时，给父元素添加no-hover类，取消背景变绿的效果。如果需要调整触发禁用的光标样式，修改currentCursor的判断值即可。

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