I have a problem with the animation on this page "intervista 5"

Practically, when the player is playing, next and prev arrows should be hidden. When the user hovers with the mouse on `div.interview_media` the function I created[1] shows current slide's active arrows.

Now, the issue: if I hover `div.interview_media` from the right or the left side of the div, centrally (i.e. where the next or the prev arrow should be) the animation enters a loop since when the arrow is hidden, the pointer triggers the animation while, appearing the arrow, the pointer is no more on `div.interview_media` but on one of the arrow (`.browse`) so arrows are hidden entering, then, a show/hide loop… doh!

Any idea on how to solve the issue?

Thank you all for you help,
Giuseppe

[1] The show hide function:

Code JavaScript:
$(function(){
    $('.interview_media').hover(
        function(){
            console.log('showing arrows');
            $('.hidden').stop(true, true).show(200);
        },
        function(){
            console.log('hiding arrows');
            $('.hidden').stop(true, true).hide(200);
        }
    );
});