解决同层hover事件重叠闪烁问题
完整代码如下：
<!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事件重叠闪烁问题的更多相关文章
- 使用jQuery的hover事件在IE中不停闪动的解决方法
在使用jQuery的hover事件时,经常会因为鼠标滑动过快导致菜单不停闪动的情况,相信很多朋友都遇到过自己做的纵向下拉菜单不停的收缩,非常的讨厌.今天在给一个网站设计菜单时也遇到了这个情况,结果在百 ...
- js中hover事件时候的BUG以及解决方法
hover事件是我们在开发前段时候遇到的稀松平常的问题,但是有没有发现会出现有一个BUg,比如,你移动到一个元素上,让它执行一个方法,然后你快速的移入移出的时候,他会进行亮瞎你眼睛的频闪效果,而且跟得 ...
- jQuery中多个元素的Hover事件
1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fu ...
- 用:hover伪类代替js的hover事件
制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用jquery的hover事件来实现,如: $(".nav").hover(fun ...
- jQuery – 鼠标经过(hover)事件的延时处理
一.关于鼠标hover事件及延时 鼠标经过事件为web页面上非常常见的事件之一.简单的hover可以用CSS :hover伪类实现,复杂点的用js. 一般情况下,我们是不对鼠标hover事件进行延时处 ...
- jquery hover事件只触发一次动画
最近工作时遇到个关于动画的问题,如下: $("div").hover( function() { $(this).animate({"margin-top":& ...
- 分享一个jquery插件,弥补一下hover事件的小小不足
hover事件有一个缺点:当你的鼠标无意划过一个dom元素(瞬间划过,这个时候用户可能不想触发hover事件),会触发hover事件 应该设置一个时差来控制hover事件的触发 比如jd左边的菜单 你 ...
- QT 托盘 hover事件捕捉
1. QSystemTrayIcon hover事件 参考:https://stackoverflow.com/questions/21795919/how-to-catch-the-mousehov ...
- 获得触发hover事件的元素id
例: <div class="menu"> <ul> <li> <a id="menu1"></a> ...
随机推荐
- 欢乐水杯(happy glass)中流体的一种实现！图文视频讲解 ! Cocos Creator!
使用cocos creator v2.2.2 实现流体效果 ! 图文+视频讲解! 效果预览 实现原理 整体思路是参考论坛中的一个帖子 这款游戏中水的粘连效果在Construct3中利用图层很容易实现, ...
- hdu2642二维树状数组，单点修改+区间查询
题目链接:http://icpc.njust.edu.cn/Problem/Hdu/2642/ 代码如下: #include<bits/stdc++.h> using namespace ...
- 《JavaScript 模式》读书笔记（4）— 函数4
这篇文章我们主要来学习下即时对象初始化.初始化时分支.函数属性-备忘模式以及配置对象.这篇的内容会有点多. 六.即时对象初始化 保护全局作用域不受污染的另一种方法,即时对象初始化模式.这种模式使用带有 ...
- [单调栈] 2018-2019 ACM-ICPC, China Multi-Provincial Collegiate Programming Contest-Maximum Element In A Stack
题目:https://codeforces.com/gym/102222/problem/A Maximum Element In A Stack time limit per test 10.0 s ...
- Hive架构原理
什么是Hive Hive是由Facebook开源用于解决海量结构化日志的数据统计:Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射 成一张表,并提供类SQL查询功能,底层计算引 ...
- Python-标准模块与第三方模块
标准模块 python官方自己的模块 os os与os.path os.chdir('desktop') 跳转至指定目录 os.listdir() ...
- CNN更新换代！性能提升算力减半，还即插即用
传统的卷积运算,要成为过去时了. Facebook和新加坡国立大学联手提出了新一代替代品:OctConv(Octave Convolution),效果惊艳,用起来还非常方便. OctConv就如同卷积 ...
- iOS 性能优化点
用 ARC 管理内存 在正确的地方使用 reuseIdentifier 尽量把 views 设置为完全不透明 如果你有透明的 Views 你应该设置它们的 opaque(不透明)属性为 YES.例如一 ...
- 理解MapReduce计算构架
用Python编写WordCount程序任务 程序 WordCount 输入 一个包含大量单词的文本文件 输出 文件中每个单词及其出现次数(频数),并按照单词字母顺序排序,每个单词和其频数占一行,单词 ...
- 【Java技术系列】爱情36技之暗送秋波的技术
1. 这篇文章想分享已经很久了,苦于皱巴巴的技术比较生涩难懂,迟迟没有找到好的分享方式,今天结合爱情中暗送秋波的故事的形式,尝试分享一下. 以后如果再有人问你们:能否在加载类的时候,对字节码进行修改? ...