Perimeter extension methods for a mouse?

Question

I would like to implement the behavior so that the mouseover / hover event is fired when the mouse hover over a specific div, but so that the mouseout event does not fire when the pointer leaves the div, but when it leaves the 10px area of ​​ourside the div.

Is there a way to achieve this that does not involve creating a larger parent div to bind the mouseout event to?

Answer 1

In my comment, I was interested to know if this is possible, and in fact it is quite simple. I don’t know how well it will work in different browsers and with a lot of divs, but it works in this example:

http://jsbin.com/exulef/2/edit

var hello = $('#hello'); var position = hello.offset(); var height = hello.height(); var width = hello.width(); $(document).mousemove(function(e) { if (hello.data('inside')) { if ((e.pageX < position.left - 10 || e.pageX > position.left + width + 10) || (e.pageY < position.top - 10 || e.pageY > position.top + height + 10)) { hello.text(position.top + " : " + position.left + " : " + e.pageX + " : " + e.pageY + " Outside") .data('inside', false); } } else { if ((e.pageX > position.left && e.pageX < position.left + width) && (e.pageY > position.top && e.pageY < position.top + height)) { hello.text(position.top + " : " + position.left + " : " + e.pageX + " : " + e.pageY + " Inside") .data('inside', true); } } }); 

Hi, this is just a square div. It would be pretty easy to turn into a plugin, which I could do later, lol.

Edit - I did this in the plugin at the end: http://jmonkee.net/wordpress/2011/09/07/jquery-extended-hover-plugin/

Answer 2

There is a way to do this without an external div, but that means your div will have a margin even if it does not hang.

It uses the fact that the padding is inside the div and the margin is outside.

• When nothing happens, we have a margin, we must go into the div to hover.

• When it freezes, the field becomes the complement, so we are inside the div a little more when the mouse leaves the div.

• When we leave the filling, it returns to the field.

css is something like:

 .a{ margin:10px; } div.b{ padding:10px; margin:0; } 

Note that it is important to have a b selector that is slightly more specific so that you can apply it without using important ones and not paying attention to the order.

js will be:

 $(".a").bind("mouseenter",function(){ $(this).addClass("b"); }).bind("mouseleave",function(){ $(this).removeClass("b"); }); 

Example here: http://jsfiddle.net/ynecV/

Answer 3

Hmm, I would go with packing the desired div in another and binding the mouse on it - this would be the most reliable solution.

BUT, if you insist on not creating another div, then I would attach a custom mousemove handler that would be attached (according to the document) to the mouseenter above the div, and find that the mouse is removed from the bounding rectangle of the div by more than 10px . If so, the mousemove handler will fire a custom jQuery event, and then it will untie itself.