javascript - How to get top level object under the mouse function? -

title says all. i've got child div's absolute positions inside relative parent div, , know whether mouse on child or parent div @ "random" point in time.

hypothetically, i'd call .mouseover method , perform .hasclass test on highest level object see if has child class or not. however, .mouseover event handler, not call relevant information.

example html below:

$(document).ready(function() {    $(".child").draggable();    settimeout(dosomething, 31415);  });      var dosomething = function() {    // edit content based on underneath mouse  }

.parent {    width: 100%;    height: 1000px;    position: relative;    background: #f0f0f0;  }  .child {    width: 300px;    height: 100px;    position: absolute;    background: #cccccc;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>    <div class="parent">    <div class="child"></div>    <div class="child"></div>  </div>

if understood correctly, want know if @ given time, mouse on child or directly on parent. achieve using :hover pseudoclass

create function checks if there .child has :hover class:

• if there is, means mouse on .child (and have element) , there's no need check parent.

• if there isn't, check if there .parent element has class created:

  • if there is: mouse on .parent not on .child;
  • if there not: mouse not on .parent or .child.

the code achieve simple:

function checkmouseover() {   if ($(".child:hover").length) {     // mouse on .child   } else if ($(".parent:hover").length) {     // mouse on .parent (but not on .child)   } else {     // mouse not on .parent or .child;   } } 

---

a simple working demo:

$(".child").draggable();  // edit content based on underneath mouse    function checkmouseover() {    if ($(".child:hover").length) {      alert("you on " + $(".child:hover").text());    } else if ($(".parent:hover").length) {      alert("you on " + $(".parent:hover").attr("id"));    } else {      alert("you not on .parent or .child");    }  }

.parent {    width: 100%;    height: 1000px;    position: relative;    background: #f0f0f0;  }  .child {    width: 300px;    height: 100px;    position: absolute;    background: #cccccc;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>    <button onclick="checkmouseover()">check mouse is</button>    <div  class="parent" id="parent1">    <div class="child">child 1</div>    <div class="child">child 2</div>  </div>    <div  class="parent" id="parent2">    <div class="child">child 3</div>    <div class="child">child 4</div>  </div>

(click on page , press tab until button, mouse on different elements , press enter trigger funtion)