After struggling for two days, I finally came up with an idea. Welcome to give me a try! ! ! Copy code The code is as follows: .org/1999/xhtml"> Untitled Document <br>ul{margin:0;padding:0} <br>li{position:relative;margin :0;padding:0;;} <br>.grid{background:#ccc;width:100px;height:100px;;} <br>.f{background:#333;width:200px;height:200px;position :absolute;top:0;left:100px; display:none} <br> <br>jQuery(function(){ <br>window .a=0; window.b=1; //Same as 1 hidden popup layer<br>$('ul').delegate('.grid','mouseover',function(){ // Put the mouse on the avatar on<br>if($('.f')){ <br>$('ul').append('<div class="f"></div>') <br>$( '.f').css({top:$(this).offset().top}) <br>} <br>window.a=0; <br>$('.f').show() ; <br>}) <br><br>$('ul').delegate('.f','mouseover',function(){// The mouse is on the pop-up layer <br>window.b=0; <br>}); <br>$('ul').delegate('.grid','mouseout',function(){//Mouse leaves the avatar <br>window.a=1; <br>}) <br>$('ul').delegate('.f','mouseout',function(){// Leave the pop-up layer <br>window.b=1; <br>}); <br><br>setInterval(function(){//console.log(window.a " " window.b " " window.c); <br>if(window.a&&window.b){ <br>$('.f') .hide(); <br>} <br>},100) <br>}) <br> < /div>