IE中伪类hover的行使、BUG及办理要领

发布时间：2018-09-04 20:29:50 所属栏目：运营来源：站长网

导读：伪类:hover的法则：在CSS1中，此伪类仅可用于a工具。且对付无href属性的a工具，此伪类不产生浸染；在CSS2中，此伪类可以应用于任何工具；今朝IE5.5、IE6仅支持CSS1中的:hover，不外新出的IE7以及 Firefox 支持CSS2中的:hover。先用CSS2的写法来实现：

伪类:hover的法则：

在CSS1中，此伪类仅可用于a工具。且对付无href属性的a工具，此伪类不产生浸染；
在CSS2中，此伪类可以应用于任何工具；

今朝IE5.5、IE6仅支持CSS1中的:hover，不外新出的IE7以及Firefox支持CSS2中的:hover。

先用CSS2的写法来实现：

<html> <head> <style> * {margin:0; padding:0;} ul {list-style:none;margin:100px;} li {height:100px; width:100px; background:#000; font-size:12px; color:#fff; position:relative;} li a {display:none;} li:hover a{display:block; text-decoration:none;width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff;} </style> </head> <body> <ul> <li>鼠标移过来触发我吧！<a href="#" title="liehuo.net" title="">哈哈，终于被你发明白！</a></li> </ul> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' title="liehuo.net" target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

各人可以测试发此刻Firefox等对CSS2支持很好的赏识器中，可以表现我们所要到达的结果，但在IE6中却无法实现。

下面让我们换一种思想，行使CSS1的写法来看看：
在CSS1中，因为无法支持li元素:hover的行使，以是把笔墨包括到a中，对a行使:hover，而且将要表现潜匿的部门放到span元素中；
CSS中我们将a的配置成块级元素，并使a的巨细和宽度和li的沟通；
并配置a为相对位置，用a来模仿上例中的li；
而用span来模仿上例中的a，配置span在默认环境下潜匿（display:none;）；
当a被触发时（:hover），则span表现（display:block;）；

但，假如凭证以上方法修改后，示例的结果，在IE6中依然无法表现。
缘故起因是：IE赏识器自身理会的题目，是IE5.5和IE6中伪类:hover的BUG。

怎样办理这个题目呢？
这个BUG可以通过在链接的属性中增进某些非凡的CSS属性声明来消除。

li a:hover {}
对其属性我们仅设定width:100px;发此刻IE6中仍旧没有变革，我们实行着变动width的value，好比使其width:99px，稀疏的工作产生了，在IE6中，潜匿的部门在触发的时辰表现出来了。我们再对li a:hover的属性仅设定color来测试（初始值为#fff），变动color值，发此刻IE6下却也不能触发表现。。。

最后总结发明，除了text-decoration，color，z-index不能触发表现（对付不能触发表现的部门，可以尚有某些漏掉的属性）外，其他属性均可以做为消除伪类:hover BUG的特定属性。

声名：
1、不提议改变display值来做为特定属性消除此BUG，并且在某些例子中此属性不必然能消除BUG。
2、对付做为特定属性的border和background中的颜色我们还可用全写和简写来改变，如#fff和#ffffff在消除BUG中理会为2个差异的值。

CSS1的写法最终结果：

<html> <head> <style> * {margin:0; padding:0;} ul {list-style:none;margin:100px;} li {height:100px; width:100px; background:#000; font-size:12px; } li a {display:block; height:100px; width:100px; position:relative; color:#fff; text-decoration:none;} li a:hover {background:#ccc;} li span {display:none; } li a:hover span {display:block; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; } </style> </head> <body> <ul> <li><a href="#" title="liehuo.net" title="">鼠标移过来触发我吧！<span>哈哈，终于被你发明</span></a></li> </ul> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' title="liehuo.net" target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

起码代码实现版(xugang实现)：

<html> <head> <style> li {height:10px; width:120px; background:#000;} li a{height:10px; width:120px; display:block;} li a:hover {background:#ccc;} li span {display:none;} li a:hover span {display:block; width:100px; height:40px; background:#c00; position:absolute; top:15px; left:180px;} </style> </head> <body> <ul> <li> <a href="#" title="liehuo.net" title="">鼠标移过来触发 <span> <ul> <li>aaa</li> <li>aaa</li> </ul> </span> </a> </li> </ul> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' title="liehuo.net" target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

等等党又赢了，iPhone	450W高功耗卡皇名不虚
群联 PCIe 5.0 SSD一定	微星Modern 14 15笔记