What causes this mouse behavior?

Answer 1

I suspect that the :hover CSS style results in the object having a different size (possibly margin), which causes the :hover CSS style to cease to be applied. This returns the object to its original dimensions, and the :hover CSS style is applied by the browser once more.

The browser can only keep up with this at a certain rate and you see visible flickering.

Answer 2

It's an edge condition.

Answer 3

At a guess, the rollover event is adding a border which changes the effective size of the element, so that the mouse is no longer over it, or something like that...

Answer 4

It is because you are adding a border on hover.
But because you hover near the top, when the border is added, your cursor goes outside of the element.
Would be best to add

border: 1px solid #FFFFFF;
border-bottom: 0px;

to begin with, in your CSS