Detecting element under cursor

Question

I have a menu link, that when hovered, shows a div#options under it. The issue is that I want to hide #options again when the mouse leaves it, but also if when it leaves the link element.

I thought the best way to do this was: on the link's hover-out function, see if the cursor is on top of #options, if it is, return false, else proceed to hiding it again.

Something like this

 $('#menu-link').hover(function() {
        $('#options').slideDown()
    }, function() {
        // Perhaps only do this if mouse is NOT on top of #options?
        $('#options').slideUp()
    });

But how can I detect which element the cursor is on?

or even, is there a better way of doing this?

very simple jsfiddle describing this is here: http://jsfiddle.net/N6kwn/5/

possible duplicate of http://stackoverflow.com/a/1273609/152640 — mothmonsterman, Jan 03 '13 at 16:13

elclanrs · Accepted Answer · 2013-01-03T16:34:55.963

...or even, is there a better way of doing this?

Yes there is, but you'll need to change your markup a bit. This is the cleanest way I can think of:

HTML:

<ul id="options">
  <li><a href="">A menu link</a>
    <ul>
      <li><a href="">Option A</a></li>
      <li><a href="">Option B</a></li>
      <li><a href="">Option C</a></li>
    </ul>
  </li>
</ul>

CSS:

#options,
#options ul {
  float: left;
  list-style: none;
  padding: 0;
  background: black;
}
#options a {
  display: block;
  text-decoration: none;
  color: yellow;
  padding: .5em 1em;
}
#options ul {
  position: absolute;
  display: none;
  min-width: 200px;
}

JavaScript:

$('#options').hover(function(){
  $(this).find('ul').stop(1).slideToggle();
});

Demo: http://jsbin.com/ehalon/1/edit

score 1 · Answer 2 · answered Jan 03 '13 at 16:20

1

You just need to move the closing </div> tag so that the submenu is enclosed in the menu...

http://jsfiddle.net/N6kwn/6/

answered Jan 03 '13 at 16:20

Reinstate Monica Cellio

25,975
6
51
67

In the real example, the #options div is absolute positioned, so this won't really work. – sqram Jan 03 '13 at 16:30
That shouldn't make any difference, as long as `#menu-link` is not relatively positioned. – Reinstate Monica Cellio Jan 03 '13 at 16:32

score 0 · Answer 3 · answered Jan 03 '13 at 16:18

0

Please refer to http://api.jquery.com/category/events/mouse-events/

Specifically: mouseover, mouseout

answered Jan 03 '13 at 16:18

ilan berci

3,883
1
16
21

Detecting element under cursor

3 Answers3