移入移出事件
//css 部分
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
background: red;
}
</style>
//html部分
<div></div>
//script部分
let oDiv = document.querySelector("div");
// 1.移入事件
// oDiv.onmouseover = function () {
// console.log("移入事件");
// }
// 注意点: 对于初学者来说, 为了避免未知的一些BUG, 建议使用onmouseenter
// oDiv.onmouseenter = function () {
// console.log("移入事件");
// }
// 2.移出事件
// oDiv.onmouseout = function () {
// console.log("移出事件");
// }
// 注意点: 对于初学者来说, 为了避免未知的一些BUG, 建议使用onmouseleave
// oDiv.onmouseleave = function () {
// console.log("移出事件");
// }
// 3.移动事件
oDiv.onmousemove = function () {
console.log("移动事件");
}
移入移出菜单应用
效果图.gif
实现:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移入移出菜单</title>
<link rel="stylesheet" href="fonts/iconfont.css">
<style>
*{
margin: 0;
padding: 0;
}
div{
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
}
ul{
list-style: none;
width: 50px;
height: 150px;
background: red;
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="https://wx2.sinaimg.cn/mw690/87fc3626gy1g5i9u6qii0j20o70o5afz.jpg" alt="">
</div>
</div>
<script>
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>
