Show / hide DIV on mouse over

Question

I want to show aa DIV on image / link hover and i have written following code

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

          $("#dvNotifications").slideUp();
      }
    );

DIV is showing on hover but when i move to div it hides, How can i stop div from hiding while mouse is over it

please view the demo http://jsfiddle.net/3hqrW/15/

Answer 1

[ based on comment] jsfiddle revised, removed css-only solution. 基于评论] jsfiddle修订，删除了css-only解决方案。 The trick is to monitor the hover state of the sliding element and use a timeout to allow the user to move over the slided element (see also comments in the updated jsfiddle).

jsfiddle derived from OPs jsfiddle @here

The hover function using your #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 see this Demo: http://jsfiddle.net/rathoreahsan/3hqrW/

The div you want to display on hover should be inside the main div on which you want to hover, and main div should have css attributes: display:block

Another Demo: http://jsfiddle.net/rathoreahsan/SGUbC/

Answer 3

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