Question

I have a div that act as a sidebar on the left, and then the rest (to the right) is an IFrame.
My sidebar has a width of 50, and I want that whenever the mouse is towards the right of that it hides, and then when the mouse “enters the <50 zone” the sidebar shows again.

Would this be possible or there is a problem with cross domain access?

Answer 1

I think that If I understood your question right, it’s not about capturing the mouse position (based on the pageX / pageY principle); but instead, it’s that you want to simply have actions fire on mouseenter and mouseleave (hover).

You can achieve these results by building your DOM properly, and then styling it the way you want.

Without having to predict the position of the mouse, we can simply dictate when to show, and when to hide the content. In this scenario, we’re using the 50px you wanted, and are ‘showing/hiding’ based on the action of the user. See working jsFiddle below:

EDIT

I choose to use .css() as opposed to .animate() because of the performance problems. If you want to tweak it, let me know.

http://jsfiddle.net/YGmN3/3/