Vadym Perepeliak Vadym Perepeliak - 1 month ago 4
CSS Question

mouse over two elements at same position

Can I detect if the mouse is over two elements at same position?
I have two circles and I would like do something if the mouse is over a mutual part of them. Some tricks can be done via CSS as well as jQuery.

<!DOCTYPE html>
<html lang="en">
<title>Coffee SVG</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src=""></script>
<style type="text/css">
#coffee-svg > rect {
fill: #c3c99f;

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

#ingredients #coffe {
fill: #330a0a;
#ingredients #milk {
fill: #fff;
<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" />

EDIT : I will add few circles more and I would detect various combinations of them. So @RodrigoQuiñonesPichioli answer is not useful for me.


For my purpose I use native javascript function document.elementsFromPoint