将鼠标悬停在同一位置的两个元素上答案

【问题标题】：mouse over two elements at same position将鼠标悬停在同一位置的两个元素上
【发布时间】：2016-09-14 01:38:20
【问题描述】：

我可以检测鼠标是否在同一位置的两个元素上吗？我有两个圆圈，如果鼠标在它们的相互部分上，我想做点什么。一些技巧可以通过 CSS 和 jQuery 完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Coffee SVG</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <style type="text/css">
        #coffee-svg > rect {
            fill: #c3c99f;
        }

        #coffee-svg circle:hover {
            opacity: 1;
        }

        #ingredients #coffe {
            fill: #330a0a;
        }
        #ingredients #milk {
            fill: #fff;
        }
    </style>
</head>
<body>
    <svg id="coffee-svg" width="500" height="600">
        <!-- Background -->
        <rect width="100%" height="100%" />
        
        <g id="ingredients">
            <!-- Coffee -->
            <circle id="coffe" cx="250" cy="250" r="90" opacity="0.8" />
            <!-- Milk -->
            <circle id="milk" cx="250" cy="160" r="70" opacity="0.8" />
        </g>
    </svg>
</body>
</html>

编辑：我会再添加几个圆圈，我会检测它们的各种组合。所以@RodrigoQuiñonesPichioli 的回答对我没用。

【问题讨论】：

如何同时将鼠标悬停在 2 个元素上！！？？
@kukkuz 元素重叠，你就在其中。
@Barmar 但是这两个中的一个会在顶部，只有那个会悬停对吗？
没有帮助吗：stackoverflow.com/questions/29377443/… ?
@VadymPerepeliak 我试图用数学方法计算你是否在两者之上（按坐标），但每一步都这样做太多了。算法是-如果鼠标坐标距两个圆心的距离小于或等于它们的半径。或另一种（愚蠢的方式）。在每次 mousemove 时“记住”最后一个悬停的元素是什么。如果以前是圆 A 而现在在圆 B 上（反之亦然），则您处于重叠部分。但这确实会出错。

标签： jquery css svg

【解决方案1】：

我无法想出一个算法来做到这一点，但这是一个穷人的方法。

$('.left-over-circle, .right-over-circle').hover(
  function() {
    $('.left-over-circle, .right-over-circle').css('background-color', 'red');
  }, 
  function() {
    $('.left-over-circle, .right-over-circle').css('background-color', 'white');
  }
);

.wrapper {
  position: relative;
  width: 400px;  height: 200px; 
  border: 1px solid black;
}
.left-under, .right-under {
  position: absolute;
   top: 0;
  width: 200px;  height: 200px;
}
.left-under {
  left: 0;
  background-color: pink;
 }
.right-under {
  right: 0;
  background-color: blue;
 }
.left-under-circle, .right-under-circle {
  position: absolute;
  width: 150px;  height: 150px;
  top: 50%; transform: translateY(-50%);
  background-color: black;
    border-radius: 100%;
}
.left-under-circle {
  right: -20%;
}
.right-under-circle {
  left: -20%;
}

.left-over, .right-over {
  position: absolute;
  top: 0;
  width: 200px;  height: 200px;
  overflow: hidden;
  z-index: 13;
}
.left-over {
  left: 0;
  background-color: hsla(0, 0%, 100%, 0.2);
 }
.right-over {
  right: 0;
  background-color: blue;
  background-color: hsla(0, 0%, 100%, 0.2);
 }
.left-over-circle, .right-over-circle {
  position: absolute;
  width: 150px;  height: 150px;
  top: 50%; transform: translateY(-50%);
  background-color: white;
  border-radius: 100%;
}
.left-over-circle {
  right: -55%;
}
.right-over-circle {
  left: -55%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="left-under">
    <div class="left-under-circle"></div>
  </div>
  <div class="right-under">
    <div class="right-under-circle"></div>
  </div>
  <div class="left-over">
    <div class="left-over-circle"></div>
  </div>
  <div class="right-over">
    <div class="right-over-circle"></div>
  </div>
</div>

小提琴

https://jsfiddle.net/Hastig/z12tgedz/

【讨论】：

这是一个不错的解决方案。我可以用它

【解决方案2】：

出于我的目的，我使用原生 javascript 函数 document.elementsFromPoint

【讨论】：