防止：悬停冒泡[重复]答案

【问题标题】：Prevent :hover bubbling [duplicate]防止：悬停冒泡[重复]
【发布时间】：2019-07-03 09:28:13
【问题描述】：

如果我们将鼠标悬停在其子元素上，如何防止父元素悬停？

这里是代码

const parent = document.getElementById('parent')
parent.onmouseover = function testAlert(e) {
  /* alert('parent') */
}
const childRight = document.getElementById('child-right')
childRight.onmouseover = function f(e) {
  e.stopPropagation()
  /* alert('child-right') */
}
const childLeft = document.getElementById('child-left')
childLeft.onmouseenter = function f(e) {
  e.stopPropagation()
  /* alert('child-right') */
}

#parent {
  background: green;
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto;
}

#parent:hover {
  background: rgba(0, 0, 0, 0.8);
}

#child-left {
  background: red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: -50px;
}

#child-right {
  background: red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50px;
  left: 100px;
}

<div id="parent">
  <div id="child-left"></div>
  <div id="child-right"></div>
</div>

https://jsfiddle.net/3tjcsyov/48/

您可以看到，如果您将鼠标悬停在红色矩形上，如果考虑 CSS 行为，绿色矩形也会悬停。是的，我们可以使用stopPropagation，但它只会阻止父元素的 js 处理程序执行，而 CSS 行为保持不变。

【问题讨论】：

你能用 JavaScript 代替 SCSS 添加行为吗？
要将鼠标悬停在子级上，您必须将鼠标悬停在父级上。我不知道可以防止这种状态。
请不要使用外部代码站点，除非 SO 的 sn-p 功能不够。
请在问题本身中发布您的代码。
@TemaniAfif 问题并不太宽泛。这个答案stackoverflow.com/a/54604384 符合 OP 描述的要求

标签： javascript html css sass

【解决方案1】：

如果您将孩子的pointer-events 设置为none，则无需任何JavaScript 即可实现此目的。

#parent {
  background: green;
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto;
}

#parent:hover {
  background: rgba(0, 0, 0, 0.8);
}

#child-left {
  background: red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: -50px;
}

#child-right {
  background: red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50px;
  left: 100px;
}

#child-left,
#child-right {
  pointer-events: none;
}

<div id="parent">
  <div id="child-left"></div>
  <div id="child-right"></div>
</div>

https://jsfiddle.net/bepLktoj/

【讨论】：

移动鼠标时闪烁
@VaibhavVishal 已修复。
这也会从子元素中移除悬停
@TemaniAfif 这不是必需的。原始代码中的孩子没有hover。
我知道，就像简单的评论说我们已经删除了所有悬停而不仅仅是悬停传播

【解决方案2】：

pointer-events:none 与 #child-left 和 #child-right 选择器一起使用应该足以满足简单的情况，即您只希望在 #parent 悬停时应用悬停样式（并且当任一子项悬停时不应用悬停样式）悬停）。实现这一点就像将它添加到您的样式表一样简单：

#child-left,
#child-right {
  pointer-events: none;
}

对于您感兴趣的更高级的情况（此“父子场景”中的每个元素都需要不同的悬停样式），我的理解是这里需要编写脚本，因为样式是从父母对孩子，而不是孩子对父母。

实现此目的的一种解决方案是引入.hover 修饰符类来模仿内置的:hover 选择器。这个.hover 类将包含您希望应用于特定元素的独特样式。您的脚本将依次根据鼠标交互添加或删除悬停类。

实现您所需的简单脚本是将hover 类添加/删除到event#target 元素，该元素随Event 对象提供（传递给mouseover 和mouseout 事件）：

const parent = document.getElementById('parent');

/*
Add mouse over and mouse out event listeners to 
add/remove hover class from the event's target element
*/

parent.addEventListener('mouseover', (event) => {
  /* 
  event.target is the actual element that triggers this 
  mouse event (ie the #parent or either of the children)
  */
  event.target.classList.add('hover');	
})

parent.addEventListener('mouseout', (event) => {
  /* 
  event.target is the actual element that triggers this 
  mouse event (ie the #parent or either of the children)
  */    	
  event.target.classList.remove('hover');	
})

#parent {
  background: green;
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto;
}

#child-right {
  background: red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50px;
  left: 100px;
}

#child-left {
  background: red;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: -50px;  
}

/*
Introduce hover modified class, which is toggled
via javascript and substitutes the native CSS 
:hover selector. I've explicity defined a selector 
for each element however via SCSS this can be 
simplified */
#parent.hover,
#child-left.hover,
#child-right.hover {
  background: rgba(0,0,0,0.8);
}

<div id="parent">
  <div id="child-left"></div>
  <div id="child-right"></div>
</div>

【讨论】：