* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 50px;
height: 150px;
background: skyblue;
border-radius: 5px;
}
.box {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
}
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;
border-radius: 5px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 60px;
background: #ccc;
display: none;
}
.subMenu img {
width: 210px;
height: 220px;
}
<div class="box">
<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/sina-ad.png" alt="">
</div>
</div>
<script>
//1.获取需要操作的元素
const weixin = document.querySelector("#weixin");
const subMenu = document.querySelector(".subMenu");
//2.添加移入事件
weixin.onmouseenter = function() {
subMenu.style.display = "block";
};
//3.添加移出事件
weixin.onmouseleave = function() {
subMenu.style.display = "none";
};
</script>