Question

比方说，我有2个圆圈，另一个圆圈（相交），有没有办法让它们都访问mouseover，mouseenter和mouseleave？我希望它们保持彼此独立，但是当光标移到两个上方时，它们都应该改变颜色。

如果我的光标仅在红色圆圈上，那么只有红色应该改变，如果我的光标在蓝色上，那么只有蓝色应该改变。如果我的光标在两个交叉点上，则两个都应改变颜色。这些圆会移动，所以我不希望为交叉点提供静态解决方案。

我知道指针事件：无；将删除允许我访问较低层的功能，但我希望它们都处于活动状态。

CIRCLE.addEventListener('mouseenter', changeColorOnTouch, false);
CIRCLE2.addEventListener('mouseenter', changeColorOnTouch2, false);


CIRCLE.addEventListener('mouseleave', function(){CIRCLE.removeAttribute("style");}, false);
CIRCLE2.addEventListener('mouseleave', function(){CIRCLE2.removeAttribute("style");}, false);

https://jsfiddle.net/hrxp2cm4/48/

Answer 1

添加父项div，并在其悬停时更改子项的CSS。

.container:hover > .circle {
  background: #f55;
}
.container:hover > .circle2 {
  background: #5ff;
}
.circle {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 100px;
  height: 100px;
  color: transparent;
  border: 2px solid red;
  border-radius: 50%;
  z-index: 5;
}

.circle2 {
  position: absolute;
  top: 0px;
  width: 100px;
  height: 100px;
  color: transparent;
  border: 2px solid blue;
  border-radius: 50%;
}

<div class="container">
  <div class="circle"></div>
  <div class="circle2"></div>
</div>

Answer 2

当鼠标位于内部圆中时，鼠标仍位于外部圆中，它们不会触发。您不能那样做，但是有一种解决方法，您可以在鼠标输入器上为内部圆手动设置外部圆的颜色。

这是代码

const c1 = document.getElementById('c1') // default color red
const c2 = document.getElementById('c2') // default color blue

c1.addEventListener('mouseenter', () => c1.style.background = 'black')
c2.addEventListener('mouseenter', () => {
  c1.style.background = 'red'
  c2.style.background = 'white'
})

c1.addEventListener('mouseleave', () => c1.style.background = 'red')
c2.addEventListener('mouseleave', () => {
  c1.style.background = 'black'
  c2.style.background = 'blue' 
})

有没有一种方法可以使事件分层的元素进入鼠标？

2 个答案: