dom啦14 移入移出菜单
dom啦14 移入移出菜单
贵哥的编程之路
发布于 2020-10-28 11:31:38
发布于 2020-10-28 11:31:38
<!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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-09-06 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读