mouse over two elements at same position

Question

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.

@kukkuz The elements overlap, and you're in that part of them. — Barmar, Sep 02 '16 at 16:13
@Barmar but one of the 2 will be on top and only that will be hovered right? — kukkuz, Sep 02 '16 at 16:14
You are rigth. I'm asking about can I detect if mouse over element that is under first one? — Vadym Perepeliak, Sep 02 '16 at 16:17
mouse hover only applies to the top layer. If you want to detect it, you need to calculate by coordinates. — Mike B, Sep 02 '16 at 16:18
Doesn't it help: http://stackoverflow.com/questions/29377443/detecting-mouse-events-on-multiple-overlapping-svg-elements ? — A. Wolff, Sep 02 '16 at 16:19
@VadymPerepeliak so in the demo you have given you want both hover styles to be applied on hover on the overlapping part? — kukkuz, Sep 02 '16 at 16:21
@VadymPerepeliak I was trying to calculate mathematically if you are over both (by coordinates), but doing that on every move is too much. Algorithm for that is - if mouse coordinate is less or equal distance from both circle centers then their radiuses. Or another (stupid way). On every mousemove "remember" what was the last element hovered. If previous was circle A and now is on circle B (or vice-versa), you are on overlaying part. But that can really glitch. — Mike B, Sep 02 '16 at 16:46
I foundsolution [here](http://stackoverflow.com/questions/29377443/detecting-mouse-events-on-multiple-overlapping-svg-elements?noredirect=1&lq=1). Here is the [jsfiddle](`http://jsfiddle.net/michaschwab/w0wufbtn/13/`) answer. — Vadym Perepeliak, Sep 03 '16 at 18:54

score 1 · Answer 1 · answered Sep 02 '16 at 23:18

I'm not capable of coming up with an algo to do this but here's a poor man's method.

$('.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>

fiddle

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

It is nice solution. I may use it – Vadym Perepeliak Sep 03 '16 at 12:50 — Vadym Perepeliak, Sep 03 '16 at 12:50

score 0 · Accepted Answer · answered Sep 13 '16 at 17:38

0

For my purpose I use native javascript function document.elementsFromPoint

answered Sep 13 '16 at 17:38

Vadym Perepeliak

215
1
3
10

mouse over two elements at same position

2 Answers2