IE使用滤镜后链接无法触发点击、hover等事件

最新推荐文章于 2018-09-19 17:42:29 发布
原创 最新推荐文章于 2018-09-19 17:42:29 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在IE6环境下，使用滤镜使div背景图片透明时，链接的hover效果及点击功能失效的问题，并提供了通过给a标签设置position:relative;来解决的方法。同时，介绍了如何利用此BUG实现特殊效果，分享了更多解决方案的链接。
IE BUG之使用滤镜后链接无法触发点击、hover等事件的解决方案


有个div的背景是个png的图片，在IE6下需要使用滤镜使它透明，但它下面的a标签的hover效果（包括绑定的事件）就没法显示，且链接也无法点击。

解决方法1：给a标签加个相对定位(position:relative;)

但是，有时候我们可以利用这个BUG达到特殊的效果

其他方法参考
http://www.candoudou.com/archives/148
kunkkaCoco
关注
CSS滤镜（filter）
zg0601的博客
10-23 2万+
目录 1、概念 2、使用 3、常用filter函数 4、常用滤镜实例
关于ie6中使用css滤镜后链接无法点击的问题
飓风
09-19 958
关于ie6中使用css滤镜后链接无法点击的问题   网上最大众华的解决ie6无法显示png背景图片透明问题的方法就是用 “filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=
IE6下使用滤镜后链接不能点击的BUG
UFO
08-21 578
大家都知道PNG图片在IE6中会显示成灰色，也有很多同学知道我们可以利用pngfix.htc或者jquery pngfix和来修正这个问题。 但有时候虽然用这些工具修复了PNG变灰的问题，仍会产生一些其他问题，比如IE6下无法点击链接。   而使用DD_belatedPNG这个工具来解决IE6下PNG不透明的问题时，则不会产生这个问题。   究其原因，估计是由于前两者采用了近似的方法
ie6 filter png a 链接不可点击
xiongzhengxiang的专栏
07-10 1274
问题  png 24 要想在ie6下显示半透明效果，必须借助ie 的filter 功能。而在filter 节点下的 子节点，如果有a链接，那么点击不会有任何反应。怎样让这种情况下的a链接正常反应呢？ 解决思路： 初看了下ie filter 的原理，上述问题产生的原因是 filer 节点下的子节点，z-index 小于filer 节点。那么我们想办法让a便器节点的z-index 大于filte
解决IE下a:hover与onclick冲突的问题。
yibosheng的专栏
08-06 391
导航的一个选项如下： 介绍 foward是一个js函数，用于控制同一个页面的两个iframe的连接地址。 又有css如下 a { background-image:url("../images/nav_4.jpg"); width:120px; } a:hover { background-position:left -32px; } 可以看到，导航的背景是一张图片。...
解决IE6浏览器不支持hover属性的终极方案
在使用JavaScript或者IE滤镜模拟hover效果时，需要注意兼容性问题。确保在不同浏览器中测试，特别是IE6至IE8，因为这些版本的IE浏览器对CSS和JavaScript的支持程度不同。 #### 4.2 性能影响 无论是使用JavaScript...
IE6PNG实现a:hover透明效果的源码分享
从标题“IE6PNG透明支持a:hover源码”中可以看出，这里讨论的源码是一段JavaScript代码，它能够使PNG图片在IE6浏览器中，在使用`:hover`伪类时保持透明效果。这种源码的编写通常涉及到对IE6特有的`滤镜（filter）`...
IE6下PNG透明完美解决方案支持Hover效果
虽然微软后来通过引入滤镜（filter）机制提供了一定程度上的补救措施，例如使用`alphaImageLoader`来加载PNG图像并保留透明度，但这种方法存在诸多弊端：它会使元素脱离文档流、影响布局、性能低下，并且无法与CSS:...
完美解决IE6兼容性问题，实现hover效果
1. CSS滤镜法：在IE6中，可以使用CSS滤镜来模拟hover效果。例如，通过改变元素的背景颜色、边框、阴影等属性来间接实现悬停效果。这种方法操作简单，但效果可能不够自然，容易被用户察觉出是模拟效果。 2. ...
10个技巧帮你搞定IE 6
09-25
IE6不支持CSS透明度，对于需要透明效果的PNG-24图像，可以使用AlphaImageLoader滤镜来解决，例如： ```css .png-fix { behavior: url(/iepngfix.htc); } ``` 注意，这种方法可能会影响性能，所以只应在必要时...
ie7，ie8下 使用绝对定位的a标签点击失效解决办法
记录踩过的坑只为了更好地填坑
05-09 3038
今天无意间发现一个使用绝对定位的a标签在ie7，ie8下 使用绝对定位的a标签点击失效解决办法,查了一下原来竟是酱紫的，又get到了一个新的技能。 以下是问题解决的办法： 这种时候有两种解决方法（主要是针对a标签不能设置背景情况）： 1、给a标签添加样式：background:url(about:blank); 2、给a标签随便添加背景色或者背景图片，然后将a标签的透明
IE8以下浏览器，包括IE8图片不平铺，平铺后点击事件失效的解决办法
格林王子举哥
09-19 808
 IE8，JSP界面图片不平铺的话，可以设置滤镜，包括背景图片，透明度都可以使用滤镜，这样就可以平铺了 <!DOCTYPE html> <html> <head> <style type="text/css"> .bodyBgColor{ background-position:50%; backgroun...
有关ie8 滤镜影响 :hover 的问题 求大神解决下 ie8下 hover 不管用
weixin_30670925的博客
12-12 247
无标题文档 -2℃ 首页 深度 初游 当季推荐 餐厅 免费景区 景点 节庆 历史 区县 交通 交通 气候 酒店 解读 当季推荐 餐厅 免费景区 景点 节庆 历史 区县 交通 交通 气候 酒店 符号 ...
hover 在 ie 中使用失效问题
pankay的专栏
05-26 1835
xiug div,p,li,ul,dl,dt,dd,input,textarea,fieldset{margin:0;padding:0;} ul,li{ list-style:none;} a{outline:none;} body{background:#000;margin:0;padding:0;} .page_wrap{width:739px;height:564px; backgr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值