在使用mouseover等鼠标事件时如移动上去灰色的遮罩层高度从0到100%

在操作中发现鼠标一直在图里面但遮罩会一直变化,我感觉应该是遮罩层出现后导致鼠标离开了底层图片所以会一直变化。想起之前用的

给遮罩层添加

pointer-events: none;
在这试了一下,发现还是有效果的;这是用来阻止元素上的事件的。使用了这个,在该元素上进行任何JS操作等都会失效,主要用在SVG上,网上很多说的都是采用延迟的办法。大家都可以根据具体的要求选择适合的方法。

mouseover等闪烁问题的更多相关文章

  1. Extjs中处理mouseover的闪烁问题

    在使用mouseover和mouseout实现鼠标滑动效果并且target的dom较复杂时,可能会产生闪烁现象,产生这个问题的一个原因是mouseover事件本身的冒泡特性和target dom的子元 ...

  2. mouseover和mouseout闪烁问题

    在父级元素上注册了mouseover和mouseout事件后,当鼠标移动到子元素上时,会触发父级的mouseout和mouseover事件,反复触发,形成闪烁. 原因: 一种是由于冒泡,子级的mous ...

  3. mouseover和mouseenter闪烁的问题

    span标签绑定mouseover/mouseout事件,显示/隐藏一个信息框div 该div下没有任何子元素 悬停上去一直闪烁,改成mouseenter也没用. 照成的原因是:悬停上去信息框div盖 ...

  4. jQuery因mouseover,mouseout冒泡产生的闪烁问题

    由于浏览器的冒泡行为.造成如果在一个DIV元素上同时定义了mouseover,mouseout的时候,当鼠标移动到DIV中的child子元素的时候,就会同时执行了两个操作mouseover和mouse ...

  5. jQuery中mouseover和mouseout冒泡产生闪烁问题

    问题:在jQuery中,对元素绑定mouseover和mouseout事件时,每次移入移出该元素和子元素时,都会触发事件,从而会出现闪动的现象. 原因:浏览器的冒泡行为. 解决方案: 使用mousee ...

  6. jquery的mouseover和mouseout闪烁问题

    $(document).ready(function(){ $(".anli").hover( function(){ var $div = $(this); t = setInt ...

  7. 两个div叠加触发事件发生闪烁问题

    今天遇到一个问题,想实现一个功能: 当鼠标移到div1上的时候,会出现div2.出现时div2在div1的上面,div2在出现后发生闪烁的问题. 于是开始找问题根源,发现原来是因为当我们触发div1的 ...

  8. mouseover和mouseout多次触发解决方法(兼容ie和firefox)(转)

    在用到mouseover和mouseout事件来作为事件触发的条件,但是如果我们用做触发的元素内部有其他的元素的时候当鼠标移上的时候会反复的触发mouseover和mouseout事件,如导致菜单闪烁 ...

  9. jQuery mouseover与mouseenter的区别

    在我们的页面中经常会用到mouseover与mouseout事件来给页面添加更好的渲染效果,但如果触发mouseover事件的元素有子元素的话,会造成闪烁的效果,看着很不舒服,这是因为mouseove ...

随机推荐

  1. mediaxyz访谈录:ffmpeg的码率控制

    mediaxyz是一位研究ffmpeg有三年的高人了,这几天一直在折腾ffmpeg中的x264,就是不知道该如何控制码率,主要是参数太多,也不知道该如何设置,在 google上search了一下,这方 ...

  2. spark uniq 本质上就是单词计数

    粗体部分示例: # dns_domain_info_list_rdd ==> [(src_ip, domain, domain_ip, timestamp, metadataid), ....] ...

  3. 使用geolocation

    The geolocation object geolocation API建立在navigator.geolocation 上. 如果对象存在,才可以使用定位服务. if ("geoloc ...

  4. mycat的事务支持情况

    中秋国庆一共12天,玩的有点嗨,完全没想工作的事情- -.回来赶紧补补.看了一下mycat关于事务的支持情况,做一下记录. 说mycat的事务支持之前,先说说XA协议,即分布式事务.指的是TM(事务管 ...

  5. RAM的分类

    转载自:http://wenku.baidu.com/view/b17d73244b35eefdc8d333ab.html RAM(随机存储器)可以分为SRAM(静态随机存储器)和DRAM(动态随机存 ...

  6. BZOJ_2730_ [HNOI2012]矿场搭建_点双联通分量

    BZOJ_2730_ [HNOI2012]矿场搭建_点双联通分量 Description 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路 ...

  7. CSS3:CSS 参考手册

    ylbtech-CSS:CSS 参考手册 1.返回顶部 1. W3School 的 CSS 参考手册定期通过所有主流浏览器进行测试. CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) ...

  8. 配置web应用

    web应用配置虚拟主机1.web应用的虚拟路径映射,就是web应用的真实存在的路径配置一个虚拟路径 在conf目录下的Server.xml 的<Host>标签中,配置<Context ...

  9. A - Toy Cars

    Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Description Little ...

  10. MySQL之避免插入重复数据

    INSERT ignore INTO `$table_name`($field_name) VALUES(),(),(),()"; //若重复数据可以添加,请在对应的数据表字段中添加数据库索 ...