鼠标一离开导航菜单，二级菜单就隐藏，移不到二级菜单

最新推荐文章于 2024-04-30 16:57:21 发布

好菜的大鹏

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量2k

点赞数 3

分类专栏： jQuery 文章标签： javascript js html jquery

本文链接：https://blog.csdn.net/weixin_42733744/article/details/124116368

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

项目场景：

提示：这里简述项目相关背景：

例如：项目场景：示例:网站右侧导航，无法移入二级菜单，鼠标移出一级菜单，二级内容立刻消失，从而鼠标无法移入二级内容区域。
在这里插入图片描述类似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里面，我们先在右侧元素添加鼠标移入，移出事件，控制左侧区域显示和隐藏，再者我们在左侧元素添加鼠标移入和移出事件，控制本身的显示和隐藏，这样就完成了！

好菜的大鹏

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
鼠标一离开导航菜单，二级菜单就隐藏，移不到二级菜单

项目场景：提示：这里简述项目相关背景：例如：项目场景：示例:网站右侧导航，无法移入二级菜单，鼠标移出一级菜单，二级内容立刻消失，从而鼠标无法移入二级内容区域。类似CSDN官网右侧，鼠标hover到二维码图标后，显示左侧关注公众号和下载APP两个二维码，需求是解决鼠标无法移入到，左侧两个二维码区域代码描述提示：这里描述项目中遇到的问题：例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据APP 中接收数据代码：<!DOCTYPE html><html lang
复制链接

扫一扫