``` <style> .active1 { position: absolute; top: 0; left: 0; background: rgba(231, 71, 21, 0.9); z-index: 4; outline: 2px solid #FFF; outline-offset: -10px; } .hm-tupian .do-title{ z-index: 4; background-color: rgba(0, 0, 0, 0);left: 50px; bottom: 50px;} </style> <script> $(function(){ $(".hm-tupian").before("<div class='active1'></div>"); $('.hm-tupian ul li').on('mouseover',function(){ console.log($(this).position()) var oPosition = $(this).position(); var that = $(this); if($(".active1").data('active1') !=='true'){ $(".active1").data('active1','true'); $(".active1").css({ width: '100%', height: $(window).height(), left: '0px', top: '0px', opacity: 0, display: 'block' }) } $(".active1").stop(false,false).animate({ opacity: 0.8, left: oPosition.left + 0, top: oPosition.top + 0, width: that.width(), height: that.height() },250) }); }) </script> ```