Javascript 有没有一种方法可以使用鼠标移动事件图层元素？

假设我有两个圆圈，一个在另一个上面（相交），有没有办法让它们都访问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);

---

当鼠标在内圈时，鼠标仍在外圈，MouseLeave不会触发。你不能这样做，但是有一个解决办法，你可以在鼠标指针上为内圈手动设置外圈的颜色

这是密码

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' 
})

---

添加父级

div

，并在其悬停处更改子级的CSS

.container:hover>.circle{
背景:#f55；
}
.container:hover>.circle2{
背景：#5ff；
}
.圆圈{
位置：绝对位置；
顶部：25px；
左：25px；
宽度：100px；
高度：100px；
颜色：透明；
边框：2倍纯红；
边界半径：50%；
z指数：5；
}
.圆圈2{
位置：绝对位置；
顶部：0px；
宽度：100px；
高度：100px；
颜色：透明；
边框：2件纯蓝；
边界半径：50%；
}

“circle”不是一个标准的HTML元素，它到底是什么？一种方法是检查鼠标是否在元素的边界内。您可以在纯CSS中实现这一点。或者你需要JS解决方案？@Teemu circle只是一个例子，它可以是任何一个element@Vaibhav可以是纯CSS，如果它适用于相互交叉和重叠的项目，如fiddle示例。如果它们完全相互重叠而不相交，则此解决方案有效，如fiddle示例中所示。因此，虽然它们都会改变颜色，它们不是相互独立的，如果我的光标只在红色上，那么只有红色应该改变，如果在蓝色上，那么只有蓝色应该改变。如果我的光标在两个（交叉点）上，那么两个都应该改变颜色。好的，让我改变