Question

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

这是代码

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，但是它只会阻止CSS行为保持不变的情况下针对父元素执行js处理程序。

Answer 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/

Answer 2

您可以通过js应用悬停样式，并根据需要删除并添加它们。

从scss中删除悬停代码。

然后添加以下js：

const css = '#parent:hover {background: rgba(0,0,0,0.8)}';
const style = document.createElement('style');
style.appendChild(document.createTextNode(css));
const head = document.getElementsByTagName('head')[0];
head.appendChild(style);

const childLeft = document.getElementById('child-left')
childLeft.onmouseenter = function f(e) {
    e.stopPropagation();
    head.removeChild(style);
}
childLeft.onmouseout = function f(e){
    e.stopPropagation();
    head.appendChild(style);
}

这仅适用于左孩子，您可以类似地做右孩子。

JsFiddle

Answer 3

在仅希望将pointer-events:none悬停的情况下应用悬停样式的简单情况下，将#child-left与#child-right和#parent选择器一起使用就足够了悬停任何一个孩子时，不应用悬停样式）。实现这一点就像将其添加到样式表中一样简单：

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

对于您感兴趣的更高级的案例（此“父子场景”中的每个元素都需要不同的悬停样式），我的理解是，鉴于样式是从父母对孩子，而不是孩子对父母。

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

实现所需功能的简单脚本是将hover类添加/删除到Event对象随附的event#target元素中（传递给{{1 }}和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);
}

防止：hover起泡

3 个答案: