<!doctype html> <html> <head> <meta charset="utf-8"> <title>弹窗</title> <style> html,body{ height: 100%; } *{ margin: 0; padding: 0; } .a{ height: 100%; width: 100%; background: rgba(0,0,0,0.5); position: absolute; top:0; left:0; display: none; } .alert{ height: 400px; width: 400px; position: absolute; background: yellow; left: 50%; top: 50%; margin-top: -200px; margin-left: -200px; display: none; } body:hover .a{ display: block; } body:hover .alert{ display: block; } </style> </head> <body> <p> 111111 <br> 11111 <br> 11111 <br> 11111 <br> 11111 <br> 11111 <br> 11111 <br> 11111 <br> 11111 <br> 11111 </p> <div class="a"></div> <div class="alert"></div> </body> </html>