完整代码如下:

<!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. 【攻防世界】simple-unpack

    知识:upx脱壳 simple-unpack 难度系数: 3.0 题目来源: 暂无 题目描述:菜鸡拿到了一个被加壳的二进制文件 提示说有壳子:然后用PE分析发现是ELF upx的壳子

  2. android studio 添加GSON

  3. webpack打包es6代码

    1.简单描述一下es6的模块导入和导出的语法: //导出:export var aa = 10;export function demo(){} //不能写成:var aa = 10;export a ...

  4. wr720n v4 折腾笔记(五):终篇-编译安装openwrt附带njit

    前言: 由于没有多余的U盘,所以想直接压缩生成一个带njit-client的openwrt固件.其中按照网上的教程走,遇到了一些问题,这里前面的步骤来源于网络.后面给出处理问题的方法. 一.准备工作 ...

  5. hdu2732 最大流+拆点

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2732 题目给定一个场景,有n*m个方格,每个方格代表一个柱子,一个柱子可以承受不同次数的跳跃,开始时图 ...

  6. Contest 156

    2019-09-29 14:56:09 总体感受:30min解决了前三题,最后一题其实也很简单,但是题目没有看清.赛后5min解决了.总体来说,本次周赛是比较简单的一次. 注意点:首先是hard问题的 ...

  7. 1036. 跟奥巴马一起编程(15) Java版

    美国总统奥巴马不仅呼吁所有人都学习编程,甚至以身作则编写代码,成为美国历史上首位编写计算机代码的总统.2014年底,为庆祝"计算机科学教育周"正式启动,奥巴马编写了很简单的计算机代 ...

  8. 多伦多大学&NVIDIA最新成果:图像标注速度提升10倍!

    图像标注速度提升10倍! 这是多伦多大学与英伟达联合公布的一项最新研究:Curve-GCN的应用结果. Curve-GCN是一种高效交互式图像标注方法,其性能优于Polygon-RNN++.在自动模式 ...

  9. setAttribute 方法

    IE8及以下不支持 setAttribute用来修改dom标签上的属性比如(onclick); getAttribute用来获取dom标签上的属性

  10. 浅谈C#中Tuple和Func的使用

    为什么将Tuple和Func混合起来谈呢? 首先,介绍一下:Tuple叫做元组,是.Net Framwork4.0引入的数据类型,用来返回多个数值.在C# 4.0之前我们函数有多个返回值,通常是使用r ...