function - jQuery, issue with slideToggle -

when mouse on div .test want div .box come above .test slidetoggle, , when mouse leaving .test want .box slidetoggle again.

it's working when i'm moving mouse in top-left of .test doesn't seem work don't know why...

my css is:

.box{     z-index:2;     position: absolute; } 

and jquery:

box = function(el) {     $('body').append('<div class="box"></div>');     var box = $('.box:last');     var postop = el.offset().top;     var posleft = el.offset().left;     box.hide().css({         'left': posleft,         'top': postop  }).html('azerty<br>azerty<br>azerty<br>azerty<br>azerty<br>azerty<br>azerty').slidetoggle(150); }  boxstop = function() {     var box = $('.box:last');     box.stop().slidetoggle(150, function() {box.remove();}); }  $(document).on('mouseover', '.test', function() {     box($(this)); }).on('mouseout', function() {     boxstop(); }); 

here fiddle : http://jsfiddle.net/malamine_kebe/skncs/3/

try changing z-index of .box -1, not covering .test , blocking mouseover.

.box{     position: absolute;     z-index: -1; } 

here's jsfiddle.

edit: since negative z-index make element behind other elements (which might not want), position .test , make sure has higher z-index .box.

.box{     position: absolute; }  .test {     z-index: 1;     position: absolute; /*could relative or fixed too*/ } 

and jsfiddle.