Detecting whether mouse is in an element with jQuery

Question

I have a web page that uses jQuery. My page looks something like this:

<div id="page">
  <!-- Stuff here -->
  <div id="content">
    <div class="row">
      <div class="col"><!-- stuff --></div>
      <div class="col"><!-- stuff --></div>
      <div class="col"><!-- stuff --></div>
      <div class="col"><!-- stuff --></div>
    </div>

    <div class="row">
      <div class="col"><!-- stuff --></div>
      <div class="col"><!-- stuff --></div>
      <div class="col"><!-- stuff --></div>      
    </div>
  </div>
  <!-- Stuff here -->
</div>

<div id="note" style="display:none;">
  <!-- stuff here -->
</div>

var noteTimeout = null;
var note = $('#note');
$(".row")
  .mouseover(function () {
    var col = $(this).find('.col:last');
    var p = col.position();

    note.css({zIndex:1000, top: p.top, left: (p.left + col.width() - note.width()/2) });
    note.show();
          })
  .mouseout(function (e) {
    if (noteTimeout != null) {
      clearTimeout(noteTimeout);
    }
    noteTimeout = setTimeout(function () {
      note.fadeOut(150);
    }, 250);
  })
;

Basically, when a user hovers over a row, I'm trying to show a note in the last column of the row. If a user moves to another row, the note moves to that row. However, if the user's mouse is outside of the "content" area, I want to hide the note after 250 milliseconds. The last requirement is causing me problems.

As it is, the note disappears after 250 milliseconds if I change rows. However, if I remove the timeout, the note flickers if a user moves their mouse over it.

That's quite a bit of code - may I suggest creating a [fiddle](https://jsfiddle.net/) so we some code to work with and debug. — James, Aug 04 '15 at 14:14

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

You want to use .hover for the element (in this case an array of elements) which detects as the mouse enters and leaves. It's an expansion of the functionality of .mouseenter() & .mouseleave().

This is will make it so that whilst the mouse is over the element it will do something rather than .mouseover which simply triggers an event.

This is explained further by Navin Rauniyar here

edited May 23 '17 at 11:51

Community

1
1

answered Aug 04 '15 at 14:28

Alex Deas

15
5

Detecting whether mouse is in an element with jQuery

1 Answers1