CSS a:hover伪类在IE6下的问题
就拿对伪类:hover的支持来说,IE7+终于添加了对a以外其它标签的支持。对于这样的改进,当然是要拍手称快的,但在IE6下,:hover就连对a的支持都不是那么的尽如人意。下面就是我想简单说的一个关于:hover在IE6及更早浏览器下的问题。
很多人可能都已经知道了:hover在IE6及更早浏览器(以下称IE6-)下的一些问题。我主要是想说一下形如a:hover span{}这样的问题。
有的时候为了增加一些简单的动态效果,常常会借助:hover的帮忙,比如我们时常会令鼠标经过链接时改变文字的颜色。如:
a:hover{color:#F00;}
<a href="?">鼠标经过时改变我的颜色</a>
是的,这将在所有的浏览器中都有效。但如果换成这样:
a:hover em{color:#F00;}
<a href="?">鼠标经过时改变我的<em>颜色</em></a>
你会发现在IE6-下什么都没有发生,我们的样式失效了。对,就是这样,应该很多人都碰到过且已经解决了这个问题。
是的,只需要再添加一个a:hover{}样式就可以解决这个问题了,里面可以是zoom, padding, margin等属性。如下:
a:hover{zoom:1;}
a:hover em{color:#F00;}
<a href="?">鼠标经过时改变我的<em>颜色</em></a>
看着恢复了正常的效果,去想可能是因为什么造成:hover失效的。你可以使用zoom, display, padding等等属性来搞定,于是想会不会是因为haslayout。恩,很有可能就是这样。但你接着测试,会发现,不论你在a:hover{}写入任何属性,color啊,font-size啊,overflow啊(甚至是不存在的属性,如xx:yyy),都可以使之恢复正常。
测试到这里是不是有点目瞪口呆的感觉?对,我也是这样的。至于原因是什么,我还不知道,或许有人知道。
一个a:hover的简单例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>:hover在IE6下的问题</title> <meta content="IE6 and earlier下的:hover问题" /> <style type="text/css"> #nav ul{zoom:1;overflow:hidden;list-style:none;margin:0;padding:0;background:#CCC;} #nav li{float:left;width:100px;height:30px;line-height:30px;text-align:center;} #nav a{color:#333;} #nav a .en{display:none;} #nav a:hover{display:block;background:#333;color:#CCC;} #nav a:hover .en{display:inline;} #nav a:hover .cn{display:none;} </style> </head> <body> <div id="nav"> <ul> <li><a href="#"><span class="en">首页</span><span class="cn">Homepage</span></a></li> <li><a href="#"><span class="en">新闻</span><span class="cn">News</span></a></li> <li><a href="#"><span class="en">图片</span><span class="cn">Picture</span></a></li> <li><a href="#"><span class="en">下载</span><span class="cn">Download</span></a></li> <li><a href="#"><span class="en">留言</span><span class="cn">Comment</span></a></li> </ul> </div> </body> </html>
转载于:https://www.cnblogs.com/huangyong8585/archive/2012/06/11/2545131.html
CSS a:hover伪类在IE6下的问题相关推荐
- Hover伪类在IE6中的实现
鼠标滑过行,行改变颜色可以使用javascript写,onmouseover,onmouseout,也可以使用css2的伪类hover,但是ie6对伪类支持的不好,需要变换一下思路,要么使用javas ...
- css:hover伪类的使用
:hover的使用,即当鼠标指针移入元素时,所做出的样式设置 示例一 <!DOCTYPE html> <html lang="en"> <head&g ...
- 前端 CSS:锚伪类选择器:hover,:active,:visited;等用法总结
前端 CSS:锚伪类选择器:hover,:active,:visited;等用法总结 锚伪类选择器:hover,:active,:visited;等用法总结 一.什么是锚伪类 在支持 CSS 的浏览器 ...
- html css hover事件,用:hover伪类代替js的hover事件_html/css_WEB-ITnose
制作二级菜单要实现鼠标移动上去显示子菜单,鼠标移出子菜单隐藏,或者其他类似需求的地方,首先我会想到用jquery的hover事件来实现,如: $(".nav").hover(fun ...
- css选择器、hover伪类
一.css选择器 使用css选择器基本流程: 1.制作所需的选择器,并在其中写入样式. 2.将选择器绑定到指定的HTML标签上. 1)class选择器 class选择器 :用 . 来标示自身, 自定义 ...
- CSS:hover伪类使用
CSS:hover伪类使用 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Adobe Dreamwe ...
- 鼠标的移入、移出事件与css中的hover伪类
开发工具与关键技术:html+css+js 作者: 李伙 撰写时间: 2019年1月19日 鼠标的移入.移出事件是一个模仿悬停事件(鼠标移入到一个对象上以及移出这个对象)的方法,当鼠标移动到一个匹配的 ...
- CSS基础(part3)--伪类及伪元素
学习笔记,仅供参考,有错必纠 参考自:CSS中文文档 文章目录 CSS 伪类 伪元素 `:first-line` `:first-letter` `:first-child` `:before` 和` ...
- CSS中的伪类和伪元素(详细)
这篇想要跟大家分享的是css中的伪类和伪元素,有任何问题可以私聊我或者评论哦! 首先,我们先来想一下 一.引入伪类跟伪元素的原因? 伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述 比如CSS ...
最新文章
- PyTorch框架:(5)使用PyTorch框架构建卷积神经网络
- c语言编程输入年月日判断是否合法,C语言程序设计:输入年月日判断这是这一年中的第几天...
- 科大星云诗社动态20211130
- deeplearning.ai 改善深层神经网络 week2 优化算法
- linux C下的setjmp与longjmp介绍
- 吴恩达深度学习5.2练习_Sequence Models_Operations on word vectors
- 每天学一点Scala之Try
- C++中常量指针,指针常量(const 和*)的使用方法和理解方法
- (转)Java ConcurrentModificationException异常原因和解决方法
- 优秀架构师是怎么炼成的?
- Apple原装扫描二维码指定区域
- 经纬度与度分秒相互转换
- openwrt开机自启动脚本编写
- 简述整车级电子电器架构开发内容
- 用md5值识别相似图片 python
- 移动硬盘位置不可用无法访问函数不正确修复方法?
- Android gradient 三色渐变背景 Shap
- MySQLdb 使用方法
- 解决字符串存在\u6d4b\u8bd5\u5206\u7c7等中文汉字(乱码)(unicode码)
- 【手把手教你】搭建神经网络(CT扫描3D图像的分类)
热门文章
- java 数组 题_(第22讲)java数组的一些编程题
- 使用Capture 制作元件库
- 机器人 陆梅东_机器人知识与实践比赛获奖 - 上海徐汇区青少年活动中心
- IBM Java多线程 - 6.其它线程 API 详细信息
- C#高级编程----错误和异常的总结
- 如何有效地防止网站和手机APP的数据被采集?
- [转载]Python方法绑定——Unbound/Bound method object的一些梳理
- 如何设置iframe高度自适应,在跨域的情况下能做到吗?
- java 本地 交互图_Java与UML交互图
- python matplotlib 显示opencv的图像