Question

var bar = $('.div_layer_Class');
  $('a.second_line').click(function() {
      $(this).unbind('mouseout');
  }).mouseover(function() {
      bar.css('display','inline');
  }).mouseout(function() {
      bar.css('display','none');
  });

now the issue with ‘onBodyclick’ when i click anywhere on body again i want to invoke mouseoutevent something like this

$('body').click(function() {
      bar.css('display','none');
 event.preventDefault();

  });

when I do this it overlaps $('a.second_line').click(function() event. any idea how I can Achieve this.

http://jsfiddle.net/qGJH4/56/

Answer 1

Example here
Try changing your code to this

var bar = $('.div_layer_Class');
$('a.second_line').click(function(e) {
    bar.addClass('on');
    e.stopPropagation();
}).mouseover(function() {
    bar.css('display','inline');
}).mouseout(function() {
   if(!bar.hasClass('on'))
       bar.css('display','none');
});

$(document).on('click',function(){
  bar.removeClass('on');
  bar.css('display','none');
  //return false;
});

Two lines to look at, first, the e in function(e)

$('a.second_line').click(function(e) {

and the stop e.stopPropagation();

That basically stops any parent handlers being notified. Read here