完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src="js/jquery.min.js"></script>

  <style>

    .smallbox{

      width:20px;

      height:20px;

      text-align: center;

      background:#333;

      /* position:absolute; */

      /* left:25px; */

      /* top:25px; */

      margin:5px;

      display: none;

    }

    .bigbox{

      width:150px;

      height:150px;

      background:#000000;

      margin: 10px;

      opacity: .1;

    }

    .pop{

      width: 150px;

      height: 150px;

      background: red;

      position: absolute;

      right: 0px;

      top: 0px;

      display: none;

    }

    .active{

      display: block;

    }

    .smallbox span{

      display: block;

      width: 100%;

      height: 100%;

      cursor: pointer;

    }

  </style>

</head>

<body>

  <div class="pop"></div>

  <div class="bigbox" key='A'></div>

  <div class="bigbox" key='B'></div>

  <div class="bigbox" key='C'></div>

  <div class="smallbox" key="1" style="position: absolute;left: 25px; top: 25px;"><span></span></div>

  <div class="smallbox" key="2" style="position: absolute;left: 50px; top: 40px;"><span></span></div>

  <div class="smallbox" key="3" style="position: absolute;left: 80px; top: 220px;"><span></span></div>

  <div class="smallbox" key="4" style="position: absolute;left: 120px; top: 180px;"><span></span></div>

  <div class="smallbox" key="5" style="position: absolute;left: 80px; top: 80px;"><span></span></div>

  <div class="smallbox" key="6" style="position: absolute;left: 120px; top: 350px;"><span></span></div>

  <div class="smallbox" key="7" style="position: absolute;left: 80px; top: 370px;"><span></span></div>

    <script>

          $(document).ready(

                  function(){

                      const arceObj={A:['5','1','2'],B:['3','4'],C:['6','7']}

                      let arceDom={}

                      // 当前所在热区

                      let arceKey=''

                      $(".bigbox").mouseover(

                              function(e){

                                  // 判断是哪个热区

                                  arceKey=$(e.target).attr('key')

                                  arceDom=e.target

                                  const arr =$('.smallbox')

                                  //console.log(arr)

                                  // 遍历这个数组  找出该热区下应该显示的小热区

                                  arr.each(function(item){

                                  const key=$(arr[item]).attr('key')

                                        //console.log(key);

                                      // 找到之后将这些smallbox元素显示

                                      if($.inArray(key,arceObj[arceKey]) !=-1){//判断arceObj数组里是否存在key

                                         $(arr[item]).show()

                                      }

                                  });

                                  $(this).css("opacity","1")

                              }

                      );

                      $(".smallbox").mouseover(

                              function(e){

                                  $(arceDom).css("opacity","1")

                                  // const arce=$(e.target).attr('key')

                                  // console.log(arce)

                                  // 当前元素的所有兄弟元素  可修改样式

                                  // $(e.target).siblings()

                                  const arr =$('.smallbox')

                                  // 遍历这个数组  找出该热区下应该显示的小热区

                                  arr.each(function(item){

                                      const key=$(arr[item]).attr('key')

                                      // 找到之后将这些smallbox元素显示

                                      if(arceObj[arceKey].indexOf(key)!=-1){

                                         $(arr[item]).show()

                                      }

                                  });

                             }

                      );

      
　　　　　　　　　　　　　/*

                      // 反向找到当前小热区所在的大热区 key为小热区的key

                      function getArcekey(key){

                        for(var akey in arceObj){

                          for(var i=0;i<arceObj[akey].length;i++){

                            // 如果找到相同的key返回大热区的key

                            if(arceObj[akey][i]==key){

                              return akey

                            }

                          }

                        }

                      }

　　　　　　　　　　　　*/

                      $(".bigbox").mouseout(

                              function(e){

                                  $(".smallbox").hide();

                                  $(this).css("opacity",".1")

                              }

                      );                 

                    $(".smallbox span").hover(function(){

                            $(".pop").addClass("active")

                    },function(){

                            $(".pop").removeClass("active")

                    });

                  }

          );

      </script>

</body>

</html>

效果图：

解决同层hover事件重叠闪烁问题的更多相关文章

  1. 使用jQuery的hover事件在IE中不停闪动的解决方法

    在使用jQuery的hover事件时,经常会因为鼠标滑动过快导致菜单不停闪动的情况,相信很多朋友都遇到过自己做的纵向下拉菜单不停的收缩,非常的讨厌.今天在给一个网站设计菜单时也遇到了这个情况,结果在百 ...

  2. js中hover事件时候的BUG以及解决方法

    hover事件是我们在开发前段时候遇到的稀松平常的问题,但是有没有发现会出现有一个BUg,比如,你移动到一个元素上,让它执行一个方法,然后你快速的移入移出的时候,他会进行亮瞎你眼睛的频闪效果,而且跟得 ...

  3. jQuery中多个元素的Hover事件

    1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fu ...

  4. 用:hover伪类代替js的hover事件

    制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用jquery的hover事件来实现,如: $(".nav").hover(fun ...

  5. jQuery – 鼠标经过(hover)事件的延时处理

    一.关于鼠标hover事件及延时 鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处 ...

  6. jquery hover事件只触发一次动画

    最近工作时遇到个关于动画的问题,如下: $("div").hover( function() { $(this).animate({"margin-top":& ...

  7. 分享一个jquery插件,弥补一下hover事件的小小不足

    hover事件有一个缺点:当你的鼠标无意划过一个dom元素(瞬间划过,这个时候用户可能不想触发hover事件),会触发hover事件 应该设置一个时差来控制hover事件的触发 比如jd左边的菜单 你 ...

  8. QT 托盘 hover事件捕捉

    1. QSystemTrayIcon hover事件 参考:https://stackoverflow.com/questions/21795919/how-to-catch-the-mousehov ...

  9. 获得触发hover事件的元素id

    例: <div class="menu"> <ul> <li> <a id="menu1"></a> ...

随机推荐

  1. WeChat 搭建过程

    [被动回复消息] 1.创建项目(基于MyEclipse + Tomcat 7 编写):wechat 2.导入jar包(用于解析xml):dom4j-1.6.1.jar,xstream-1.3.jar ...

  2. PHP7内核（四）：生命周期之开始前的躁动

    上一章我们对PHP的源码目录结构有了初步了解,本章我们继续从生命周期的维度对PHP进行剖析. 一.概览 生命周期是什么呢?你可以把它看作执行过程,PHP的生命周期也就是它从开始执行到结束执行的过程. ...

  3. [Jenkins01] Jenkins的安装和部署（jenkins教程）

    一.jenkins的下载.安装以及环境的搭建部署. 1.什么是jenkins以及它的作用: Jenkins 是一个可扩展的持续集成(CI)平台.它只是一个平台,真正运作的都是插件. Jenkins的主 ...

  4. 算法修炼之路——【链表】Leetcode24 两两交换链表中的节点

    题目描述 给定一单链表,两两交换其中相邻的节点,并返回交换后的链表. 你不能只是简单的改变节点内部的值,而是需要实际的进行节点交换. 示例: 输入:head = [1, 2, 3, 4] 输出:hea ...

  5. 一个js函数算出任意位数的水仙花数

    一个算出任意位数的水仙花数的函数如下: var arr =[]; /*更改num确定取值范围*/ for(var num = 100; num <= 9999;num++){ /*多位数版本*/ ...

  6. jdk下httpserver源码解析

    在写这篇博客之前我查了很久发现全网都没有一篇写httpserver源码解析的 所以今天就由我来为大家解析一下httpserver的源码.(这里我会去掉其中的https部分的源码,只讲http部分,对h ...

  7. 记一次Task抛异常，调用线程处理而引发的一些随想

    记一次Task抛异常,调用线程处理而引发的一些随想 多线程调用,任务线程抛出异常如何在另一个线程(调用线程)中捕获并进行处理的问题. 1.任务线程在任务线程执行语句上抛出异常. 例如: private ...

  8. NKOJ4330 逛公园

    时间限制 : - MS   空间限制 : 565536 KB  评测说明 : 3s 问题描述 策策同学特别喜欢逛公园.公园可以看成一张N个点M条边构成的有向图,且没有 自环和重边.其中1号点是公园的入 ...

  9. Win32程序：与"LPCWSTR"类型的形参不兼容

    出现该问题的原因是通常手动输入的字符串都是LPCSTR类型的, 解决办法如下: 在工程处右键,属性-常规-字符集,将Unicode字符集改为为多字节字符集,应用并确认即可.   字符串常量报错: 在常 ...

  10. vue+springboot后台实现页面按钮权限

    思路 1.用户跟角色关联 2.角色跟菜单关联 3.菜单跟菜单下的按钮关联 4.后端返回每个菜单下的按钮,前端通过自定义事件,在每个按钮上加上相应的事件 打字麻烦,还是看图吧! 建立btn.js 然后在 ...