3

I'd like to detect which side (top, left, right, bottom) of div cursor comes from and leaves. If it leaves to the left I'd like text inside to move to the left as well.

1
  • Just out of curiosity, what do you need this for? You could solve this using a bit of maths and dimension-getting, but there might be a better solution to the root cause of your problem (XY problem).
    – Bojangles
    Dec 20, 2011 at 16:12

5 Answers 5

7

Amazingly, there is a CSS-only implementation of directional hover here (I didn't write this, found it on Twitter): http://jsfiddle.net/kizu/zfUyN/. It wouldn't work in IE, but it might give you some alternative ideas for ways to implement it in JQuery.

0
2

mouse events give coordinates, you can get them in jquery with event.pageX and event.pageY, comparing that to the position of the div's midpoint should give you the side you come from.

1

onmouseout get mouse coords and compare to div.offset[Top|Left|Left+Width|Top+Height]

1

You can relatively easily do it by checking the mouse's position in a mouseleave() handler, and then comparing it to the position and dimensions of the element.

0

Make 4 more absolute position divs that's very narrow and blank like a space holder. Position them as a square around your main center div and give them id's. From there just use onmouseover event to send data to a single variable that all 4 divs mouseover handle functions can reset.

Example below

lowerdiv.onmouseover = function () { yourResults = "came from bottom" }

upperdiv.onmouseover = function () { yourResults = "came from top" }

leftdiv.onmouseover = function () {  yourResults = "came from left" }

rightdiv.onmouseover = function () { yourResults = "came from right" }

centerElement.onmouseover = function () { displayResults.innerHTML = yourResults }

centerElement.onmouseout = function () { displayResults.innerHTML = "" }

This is for starters. Add an if statement to check if the mouse is over the centerElement or not to make rollover function say exits from either top, bottom, left or right.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.