How do I hide a adjacent div when I mouseout of a menu item, using JQuery?

I was wondering how I could reverse the click triggered in this function on 'mouseout' of 'a.menu-arrow'? See code below:

$(".menu-arrow").hover(function() {
  $.data(this, "timer", setTimeout($.proxy(function() {
    $(this).click();
  }, this), 500));
}, functio开发者_StackOverflown() {
  clearTimeout($.data(this, "timer"));
});

What happens is after 0.5 of a second of hovering over a.menu-arrow...a click is triggered showing a adjacent div containing the submenu. This is how the HTML is structured unfortunately.

Any help would be greatly aprreciated.

Sorry I'm a novice at JavaScript & JQuery

In your code $(this).click() is not useful without a event handler function, to trigger an event virtually you need to use a .trigger() on an element, I believe you had a corresponding event handler function written before.

Ref : .trigger(), .data()