提示：这里简述项目相关背景：
例如：项目场景：示例:网站右侧导航，无法移入二级菜单，鼠标移出一级菜单，二级内容立刻消失，从而鼠标无法移入二级内容区域。
类似CSDN官网右侧，鼠标hover到二维码图标后，显示左侧关注公众号和下载APP两个二维码，需求是解决鼠标无法移入到，左侧两个二维码区域
提示：这里描述项目中遇到的问题：
例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据
APP 中接收数据代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
a {
text-decoration: none;
}
.aside {
position: absolute;
right: 1%;
top: 50%;
transform: translate(0, -50%);
}
.aside .icon {
display: flex;
justify-content: flex-end;
align-items: center;
}
.aside .icon .content {
padding-right: 10px;
display: none;
}
</style>
</head>
<body>
<div class="aside">
<div class="icon">
<div class="content">我是内容</div>
<a href="javascript:;">
<img src="./icon3.jpg" alt="" />
</a>
</div>
<div class="icon">
<div class="content">我是内容</div>
<a href="javascript">
<img src="chrome://favicon2/?size=24&scale_factor=1x&show_fallback_monogram=&page_url=http%3A%2F%2Flocalhost%3A8080%2F%23%2F" alt="" />
</a>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$(function () {
$(".aside .icon > a").hover(
function () {
$(this).prev().show();
},
function () {
$(this).prev().hide();
}
);
$(".aside .icon > .content").hover(
function () {
$(this).show();
},
function () {
$(this).hide();
}
);
});
</script>
</body>
</html>
我们首先，在页面布局的时候，让左侧显示隐藏的区域和右侧区域紧密连接起来，左侧用padding来做边距，切记不要用margin。之后再js里面，我们先在右侧元素添加鼠标移入，移出事件，控制左侧区域显示和隐藏，再者我们在左侧元素添加鼠标移入和移出事件，控制本身的显示和隐藏，这样就完成了！