Vadym Perepeliak Vadym Perepeliak - 2 months ago 15
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">
<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>





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

Answer

For my purpose I use native javascript function document.elementsFromPoint