abstract:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>留言</title> <style> .div1{ position:absolute; right: 0px; width:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>留言</title> <style> .div1{ position:absolute; right: 0px; width: 80px; height:80px; font-size:50px; text-align: center; font-weight: bold; font-family: 楷体; border:2px solid #FFE4E1; box-shadow: 5px 5px 15px #FFE4E1; } .div2{ display: none; width:40px; height:400px; font-size:24px; position:absolute; right:400px; top:40px; font-weight: bold; border:2px solid #eeeeee; box-shadow: 5px 5px 15px #F0FFF0; padding:10px; } .div3{ display: none; width:40px; height:400px; font-size:24px; position:absolute; right:200px; top:40px; font-weight: bold; border:2px solid #eeeeee; box-shadow: 5px 5px 15px #F0FFF0; padding:10px; } .box{ position: relative; width: 600px; height: 500px; line-height: 80px; font-size: 18px; border:2px solid #FFD39B; box-shadow: 5px 5px 20px #FFD39B; margin:200px auto; } .div1:hover .div2{display:block;cursor:pointer; } .div1:hover .div3{display:block;} /*问:.div:hover能不能同时控制.div2和.div3*/ </style> </head> <body> <div class="box"> <div class="div1" value="">戳 <div class="div2">人生如逆旅</div> <div class="div3">我亦是行人</div> </div> </div> </body> </html>
Correcting teacher:天蓬老师Correction time:2019-04-12 16:56:24
Teacher's summary:/*问:.div:hover能不能同时控制.div2和.div3*/
你可以给这几个div . 添加统一的class, 然后针对这个class来设置样式, 实现批量定义