CODEWITHSUNDEEP
jquerycsssvg
Vadym Perepeliak
Vadym Perepeliak

Reputation: 225

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.

Upvotes: 2

Views: 133

Answers (2)

Vadym Perepeliak
Vadym Perepeliak

Reputation: 225

For my purpose I use native javascript function document.elementsFromPoint

Upvotes: 0

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

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/

Upvotes: 1

Related Questions