`
Jabbar2011
  • 浏览: 165819 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

解决IE 下div与img重叠无法触发鼠标事件的问题

    博客分类:
  • css
阅读更多
问题描述

在IE下当我想在img标签上层显示一个div元素时,此时如果该div的background为空白(没有设置图片、或者颜色填充),会导致该div的鼠标事件失效;如果设置border为1px solid red,则鼠标事件只能在该div边框上面响应

如图所示:




找了很多方法,终于得出了一个完美的解决方案:

设置该div的
background-image: url(#);
  • 大小: 49.7 KB
0
0
分享到:
评论

相关推荐

    两个div叠加触发事件发生闪烁问题的解决方法

    然而,在这种情况下,可能会遇到一个常见的问题:当鼠标在两个重叠的`div`之间移动时,触发的事件导致元素闪烁,这极大地影响用户体验。本文将详细介绍这个问题的原因以及如何通过CSS和JavaScript来解决它。 首先,...

    鼠标感应图片浏览器..

    标题中的“鼠标感应图片浏览器”指的是一个网页应用或者功能,它能够根据用户的鼠标移动、悬停或点击等交互行为来展示或操作图片。在网页设计中,这种效果常常用于图片预览、幻灯片展示或者交互式图像元素。实现这种...

    图片重叠 点击互相切换.zip

    在实际应用中,可能还需要考虑浏览器兼容性问题,特别是在使用CSS3属性和JavaScript特效时。对于老旧的浏览器,可能需要借助polyfill库或者回退到更传统的JavaScript解决方案。此外,为了提高性能和减少HTTP请求,...

    jquery+div带动画按钮图片手动与自动切换的特效代码.rar

    在自动切换模式下,开发者可能会使用`setInterval()`函数来定期触发图片切换事件;而在手动切换模式下,用户可能通过点击按钮或触发某个事件来切换图片。 在jQuery代码中,我们需要关注以下关键部分: 1. 图片元素...

    gallery重叠特效源码+注释.zip

    在IT行业中,网页设计与开发是一项关键技能,而"gallery重叠特效源码+注释.zip"这个资源正提供了一个独特的机会,让我们深入理解如何在网页上实现吸引人的视觉效果。这里的“gallery”通常指的是一个图片展示区域,...

    CSS3鼠标hover图文切换特效.zip

    本案例中的“CSS3鼠标hover图文切换特效”就是一个很好的例子,它允许用户在悬停时实现图片与文字的平滑过渡,提升用户体验。 首先,我们来理解这个特效的基本原理。默认情况下,页面上会展示一张图片,当用户的...

    前端面试宝典(附答案、带索引目录)

    4. img的alt与title:alt是图片无法显示时的文字替代,对SEO和可访问性至关重要;title是鼠标悬停时显示的提示信息。 5. 渐进增强与优雅降级:渐进增强是从基本功能开始,逐步增加复杂性,确保所有用户都能访问;...

    图片动态循环滚动js代码

    在图片轮播中,我们需要选取存放图片的容器,如`<div>`,以及图片元素`<img>`,并根据需求动态更改`<img>`的`src`属性来实现图片切换。 2. **时间间隔与定时器**:为了实现图片的自动循环滚动,我们可以利用`...

    面试宝典指南大全

    alt属性用于图像无法显示时提供替代文本,而title属性则提供鼠标悬停时的提示信息。 6. **strong与em的区别** strong和em标签都用于强调文本,但strong强调语气的重要性,而em更强调语义上的强调或重音。 #### ...

    放大镜效果_jquery版.zip

    在jQuery代码中,你可能需要创建一个函数来处理放大镜效果,这个函数会在`mousemove`事件触发时被调用。同时,还需要考虑边界条件,确保放大区域不会超出图片的范围。在鼠标离开图片时,可以恢复图片和遮罩层的初始...

    web前端面试题

    - 兼容性问题通常涉及元素的布局、事件处理、CSS 样式等方面。 - 解决方法包括使用条件注释、浏览器检测、CSS Hack 等。 **49. 列出 display 的值,说明他们的作用。position 的值,relative 和 absolute 定位原点...

    javascript轮播图示例.zip

    - 事件对象(event)可以获取触发事件的相关信息,如`event.target`获取触发事件的元素。 5. **变量和数据管理**: - 常见的变量有当前显示的索引、总图片数量、计时器ID等,用于跟踪轮播状态。 - 逻辑控制确保...

    刮刮卡的效果

    我们可以使用绝对定位使覆盖层与底层内容重叠,通过设置不同的透明度或背景颜色来控制刮开的状态。CSS3的过渡(transition)和动画(animation)属性可以实现刮开动作的平滑过渡。在兼容性方面,现代浏览器对CSS3的...

    web前端面试宝典

    - **应用场景**:解决外边距重叠等问题。 **注意事项**:了解BFC的形成条件和特性。 ##### 35. HTML语义化 - **概念**:使用有意义的标签来表示页面内容。 - **好处**: - 提高代码可读性和可维护性。 - 有助于...

    前端面试题汇总.pdf

    5. **标签属性差异**:img标签的alt属性用于图像无法显示时提供替代文本,title属性用于鼠标悬停时显示提示信息;strong和em标签都用于强调文本,但strong强调语义重要性,em强调语气。 6. **渐进增强与优雅降级**...

    利用HTML和CSS制作一个八卦图.md

    此时可能会出现`circle-l`和`circle-r`重叠的问题,可以通过将所有元素的`box-sizing`属性设置为`border-box`来解决这个问题。 ```css * { box-sizing: border-box; } ``` 效果如下所示: ![分割后的八卦图]...

    jquery图片点击翻转效果(扑克牌翻转效果)

    在事件处理函数中,添加和移除`.flipped`类来触发翻转效果。例如: ```javascript $('.flip-container').click(function() { $(this).find('.flipper').toggleClass('flipped'); }); ``` 4. **兼容性和性能...

    jQuery图文卡片3D叠加轮播切换代码

    `images`和`img`目录可能存储了图文卡片的背景图片,这些图片资源与CSS结合,共同构建出美观的图文内容。 7. **JavaScript文件**:`js`目录下的脚本文件(可能命名为`main.js`或类似)包含了上述所有逻辑的实现。...

    HTML源码文件-蒙版拖拽横向轮播图

    蒙版可能与图片层重叠,增加了一种动态的视觉体验。 轮播图的核心功能则依赖于JavaScript(JS)。JavaScript是一种广泛使用的客户端脚本语言,用于增加网页的交互性和动态行为。在这个轮播图中,JS负责处理用户的...

    前端面试汇总

    img标签的alt与title属性,strong与em的使用场景** - **alt与title**: `alt`属性提供图像的替代文本,对SEO友好;`title`属性提供额外的信息或提示。 - **strong与em**: `strong`强调文本的重要性,`em`表示强调...

Global site tag (gtag.js) - Google Analytics