Can you please take a look at This Demo and let me know how I can prevent/stop slidedown function when user move back the cursor to the handler element

For example if you mouse over Home the .tab-pane will slide down and if you move mouse from the .tab-pane to Home tab it will re slide down the content. What I need to detect if mouse is coming from associated .tab-pane do nothing

2.   function(e) {
3.     $(this).parent().addClass('active');
4.     var target = $(this).data("target");
5.     $($(e.target).attr('href')).slideDown('slow');
6.   },
7.   function(e) {
8.     $(this).parent().removeClass('active');
9.     var target = $(this).data("target");
10. 
    
11.     var targetId = target.replace('#', '');
12.     var relatedTarget = $(e.relatedTarget);
13. 
    
14.     if (relatedTarget.attr('id') === targetId) {
15.       return;
16.     }
17. 
    
18.     $($(e.target).attr('href')).hide();
19.   }
20. );
21. 
    
22. $('.tab-pane').hover(function(e) {}, function() {
23.   $(this).slideUp('slow');
24.   $('.nav-tabs li').removeClass('active');
25. });