<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } div { position: fixed; right: 0px; top: 50%; transform: translateY(-50%); } ul { list-style: none; width: 50px; height: 150px; background: skyblue; border-radius: 5px; } ul>li { width: 50px; height: 50px; line-height: 50px; text-align: center; border-bottom: 1px solid #ccc; color: #fff; font-size: 20px; } ul>li:last-child{ border-bottom: none; } .subMenu{ width: 250px; height: 270px; padding: 20px; box-sizing: border-box; background: #ccc; border-radius: 5px; position: absolute; top: 50%; transform: translateY(-50%); right: 60px; display: none; } .subMenu>img{ width: 210px; } </style> </head> <body> <div> <ul> <li class="iconfont icon-qq"></li> <li class="iconfont icon-weixin" id="weixin"></li> <li class="iconfont icon-youjian"></li> </ul> <div class="subMenu"> <p>微信二维码</p> <img src="images/qrcode.png" alt=""> </div> </div> <script type="text/javascript"> let weixin = document.querySelector("#weixin"); let subMenu = document.querySelector(".subMenu"); weixin.onmouseenter=function() { subMenu.style.display="block"; } weixin.onmouseleave=function() { subMenu.style.display="none"; } </script> </body> </html>
dom啦14 移入移出菜单
关注
打赏
