CODEWITHSUNDEEP
javascripthtmljquery
Matt Murphy
Matt Murphy

Reputation: 130

JS/JQuery getting the element mouse is over

I'm using JQuery and I'm looking to get the element of the cursor is hovering over, however, I'm after something like this

for example:

<div id="outerBox">OuterBox
    <div id="innerBox">InnerBox
    </div>
</div>
  1. When mouse enters the “outerBox”, fire the “outerBox” event.
  2. When mouse enters the “innerBox”, fire the “innerBox” event.
  3. When mouse enters back to the “outerBox”, fire the “outerBox” event.

However the only events I can find are

mouseover()

  1. When mouse enters the “outerBox”, fire the “outerBox” event.
  2. When mouse enters the “innerBox”, fire the “innerBox” event, follow by the “outerBox” event.
  3. When mouse enters back to the “outerBox”, fire the “outerBox” event.

mouseenter()

  1. When mouse enters the “outerBox”, fire the “outerBox” event.
  2. When mouse enters the “innerBox”, fire the “innerBox” event.
  3. When mouse enters back to the “outerBox”, no event will fire.

Upvotes: 2

Views: 76

Answers (4)

Mario Perez
Mario Perez

Reputation: 3377

you could use the .hover API, first function triggers when you hover-in and the second when you hover-out, heres a sample:

$( "#outerBox" ).hover(
  function() {
    console.log("hola")
  }, function() {
    console.log("adios")
  }
);

$( "#innerBox" ).hover(
  function() {
    console.log("innerHola")
  }, function() {
    console.log("innerAdios")
  }
);
#outerBox {
  display: block;
  background-color: blue;
}

#innerBox {
  display: block;
  width: 50%;
  background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outerBox">OuterBox
    <div id="innerBox">InnerBox
    </div>
</div>

Upvotes: 0

chandan_kr_jha
chandan_kr_jha

Reputation: 557

Use event propagation. When the mouse is on innerBox use the mousemove event to stopPropagation and it will not bubble to outerBox.

Refer this link https://www.sitepoint.com/event-bubbling-javascript/

Upvotes: 1

SMAKSS
SMAKSS

Reputation: 10520

I think you miss a little note here. Events by default during the propagation got two phases: capturing and bubbling. You can read more about them here.

It is something like this:

enter image description here

So whenever you click an item within another item, by default it will bubble trough the parent element, then the parent event will get called. To avoid such a thing you should use .stopPropagation(), so the actual code of yours should be something like this:

document.getElementById("outerBox").addEventListener("mouseover", function () {
  console.log("Mouse is over outer box");
});

document
  .getElementById("innerBox")
  .addEventListener("mouseover", function (event) {
    event.stopPropagation();
    console.log("Mouse is over inner box");
  });
<div id="outerBox">OuterBox
  <div id="innerBox">InnerBox
  </div>
</div>

Upvotes: 2

Jesper Martinez
Jesper Martinez

Reputation: 631

You can simply do this on jQuery.

      /* Mouse Enter */
      $('.outerBox').bind('mouseover',function(){
           alert("true");
      });

      /* Mouse Outer */
      $('.innerBox').bind('mouseout', function(){               
           alert("false"); 
      });

Upvotes: 0

Related Questions