Question

我可以检测鼠标是否位于同一位置的两个元素上吗？我有两个圆圈，如果鼠标位于它们的相互部分上，我想做点什么。一些技巧可以通过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回答对我没用。

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

Answer 2

出于我的目的，我使用原生javascript函数ExcelApi

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

2 个答案: