Show / hide div on mouse

Question

I want to show a DIV in image / link display mode, and I wrote the following code

$("#NotificationSummary").hover( function () { $("#dvNotifications").slideDown(); }, function () { $("#dvNotifications").slideUp(); } ); 

DIV shows on hover, but when I go to the div that it hides, how can I stop the div from hiding when the mouse is over it

check out the demo http://jsfiddle.net/3hqrW/15/

Answer 1

[ reedit based on comment] jsfiddle revised, only css solution removed. The trick is to monitor the hanging state of the sliding element and use a timeout to allow the user to navigate the sliding element (see also comments in the updated jsfiddle).

jsfiddle obtained from OPs jsfiddle @ here

Hover function using #ids:

 function hover(e){ e = e || event; var el = e.target || e.srcElement ,showel = $('#dvNotifications') ; if (!/NotificationSummary/i.test(el.id)) { showel .attr('data-ishovered',/over/i.test(e.type)); } else { showel .attr('data-ishovered',false) } if (/true/i.test(showel .attr('data-ishovered'))){return true;} if (/over$/i.test(e.type) && /NotificationSummary/i.test(el.id)){ showel .slideDown(); } else { setTimeout(function(){ if (/false/i.test(showel .attr('data-ishovered'))) { showel .slideUp(); showel .attr('data-ishovered',false); } } ,200); } 

}

Answer 2

Tanveer kindly look at this demo: http://jsfiddle.net/rathoreahsan/3hqrW/

You must display the div you want to display on hover inside the main div you want to hover over, and the main div should have css: display:block attributes

Other demo: http://jsfiddle.net/rathoreahsan/SGUbC/

Answer 3

  $("#NotificationSummary").mouseenter(function() { $("#dvNotifications").fadeIn(); }).mouseleave(function() { $("#dvNotifications").fadeOut(); });