js根据鼠标方向划入遮罩层:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> ul{ overflow:hidden; } .game-list{ float: left; width:296px; height:240px; border: 1px solid #cdcdcd; box-shadow: 0 10px 10px #e7e7e7; margin-left: 93px; margin-top:20px; position: relative; overflow: hidden; } .slidiv{ position: absolute; height:240px; width:296px; background: rgba(9,9,9,0.5); position: absolute; left:-296px; top:0; text-align: center; color: #FFFFFF; } a{ width:296px; height:240px; display: block; } </style> <body> <div> <ul> <li class="game-list"> <a href="#">3131</a> <div class="slidiv"> <p>1</p> </div> </li> </ul> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> slidiv() function slidiv(){ $(".game-list").bind("mouseenter mouseleave", function(e) { var w = $(this).width(); var h = $(this).height(); //计算鼠标指针x,y位于当前元素比例的坐标位置 var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); //得出四个方向的值（0，1，2，3） var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; this_slidiv = $(this).find('.slidiv'); if(e.type == 'mouseenter'){ switch(direction){ case 0 : this_slidiv.css({top:-h,left:"0px"}); break; case 1: this_slidiv.css({top:"0px",left:w}); break; case 2: this_slidiv.css({top:h,left:"0px"}); break; case 3: this_slidiv.css({top:"0px",left:-w}); break; } this_slidiv.stop(true,true).animate({"top":"0px","left":"0px"},"fast"); }else if(e.type == 'mouseleave'){ switch(direction){ case 0 : this_slidiv.stop(true,true).animate({"top":-h},"fast"); break; case 1: this_slidiv.stop(true,true).animate({"left":w},"fast"); break; case 2: this_slidiv.stop(true,true).animate({"top":h},"fast"); break; case 3: this_slidiv.stop(true,true).animate({"left":-w},"fast"); break; } } }); } </script> </html>