实现父div悬停效果仅作用指定子元素，悬停OPT按钮时取消效果并区分点击

问题说明 #

• 目标交互：鼠标进入#Cloth-Tool父容器时，Cloth文本和对应图标透明度变为0.6；悬停OPT按钮时，文本和图标恢复完全不透明，同时按钮背景变为蓝色。
• 当前问题：悬停OPT按钮时，文本和图标仍保持0.6的透明度。
• 额外需求：区分点击父容器（图标/文本区域）与OPT按钮，分别执行runCloth()和openOptions()函数。

CSS修复方案 #

原CSS中，#cloth-option-btn:hover #Cloth-Tool-img这类选择器无效，因为图标和文本是按钮的兄弟元素而非子元素。改用:has()选择器实现精准控制：

/* OPT按钮悬停时背景变蓝 */
.options-btns:hover {
  background-color: #72b7f8;
}

/* 父容器悬停且未悬停按钮时，图标和文本变透明 */
#Cloth-Tool:hover:not(:has(#cloth-option-btn:hover)) #Cloth-Tool-img,
#Cloth-Tool:hover:not(:has(#cloth-option-btn:hover)) #Cloth-Tool-Text {
  opacity: 0.6;
}

兼容旧浏览器方案 #

如果需要兼容不支持:has()的旧浏览器，可通过JS控制类名实现：

const clothTool = document.getElementById('Cloth-Tool');
const optionBtn = document.getElementById('cloth-option-btn');

clothTool.addEventListener('mouseenter', () => clothTool.classList.add('hovered'));
clothTool.addEventListener('mouseleave', () => clothTool.classList.remove('hovered'));
optionBtn.addEventListener('mouseenter', () => clothTool.classList.add('btn-hovered'));
optionBtn.addEventListener('mouseleave', () => clothTool.classList.remove('btn-hovered'));

对应的CSS：

.options-btns:hover {
  background-color: #72b7f8;
}

#Cloth-Tool.hovered:not(.btn-hovered) #Cloth-Tool-img,
#Cloth-Tool.hovered:not(.btn-hovered) #Cloth-Tool-Text {
  opacity: 0.6;
}

点击事件区分方案 #

利用事件冒泡机制，在按钮点击时阻止事件向上传递，避免触发父容器的点击逻辑：

修改后的HTML #

<div id="Cloth-Tool" class="tools">
  <img class="toolIcons" id="Cloth-Tool-img" src="./images/cloth.svg">
  <p class="tools-text" id="Cloth-Tool-Text">Cloth</p>
  <button class="options-btns" id="cloth-option-btn">OPT</button>
</div>

JavaScript逻辑 #

// 父容器点击事件：点击图标/文本区域时执行
document.getElementById('Cloth-Tool').addEventListener('click', () => {
  runCloth();
});

// OPT按钮点击事件：阻止冒泡并执行对应逻辑
document.getElementById('cloth-option-btn').addEventListener('click', (e) => {
  e.stopPropagation(); // 阻止事件冒泡到父容器
  openOptions();
});

// 示例业务函数
function runCloth() {
  console.log('执行cloth工具逻辑');
  // 你的业务代码
}

function openOptions() {
  console.log('打开cloth选项面板');
  // 你的业务代码
}

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