IE中伪类:hover的使用及BUG

作者:blank 来源:蓝色经典 时间:2007-05-11 17:04:00 

:hover是我们在CSS设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类:hover,比如我们常见的纯CSS菜单、相册效果等等。

或许用了这么久的伪类:hover,还有部分朋友还不完全了解hover的规则:

引用:

在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。
在CSS2中此伪类可以应用于任何对象。


但目前IE5.5、IE6仅支持CSS1中的:hover,不过新出的IE7是支持CSS2中的:hover。

当我们用伪类:hover做某些特殊效果时,依据CSS2很好完成,但为了现在占据主流浏览器的IE6,我们又不得不做很多工作,比如给添加a元素等来模拟完成最终的效果。

或许这样讲太空洞,请看下面一个常见的触发显示的例子(仅选择IE6为例讲解)。

我们先用CSS2的写法来实现:

XHTML部分:


<ul>
<li>鼠标移过来触发我吧!<a href="#" title="">哈哈,终于被你发现了!</a></li> 
</ul>


CSS部分:


* {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;}


演示效果

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

大家可以测试发现在FF等对CSS2支持很好的浏览器中,可以显示我们所要达到的效果,但在IE6中却无法实现。

下面让我们换一种思维,所用CSS1的写法来看看,这个时候由于无法支持li元素:hover的使用,我们只好把所有文字包含到a中,对a使用:hover,并且将要显示隐藏的部分放到span元素中,首先我们对XHTML进行部分调整,调整如下:

XHTML部分:


<ul>
<li><a href="#" title="">鼠标移过来触发我吧!<span>哈哈,终于被你发现</span></a></li> 
</ul>


CSS中我们将a的设置成块级元素,并使a的大小和宽度和li的相同,并设置a为相对位置,用a来模拟上例中的li;而用span来模拟上例中的a,设置span在默认情况下隐藏(display:none;),当a被触发时(:hover),则span显示(display:block;)

CSS部分:


* {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 span {display:none; }
li a:hover span {display:block; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; }


运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

标签:IE,hover,CSS
0
投稿

猜你喜欢

  • git恢复删除的分支及内容的方法

    2023-03-09 20:16:27
  • 使用python实现时间序列白噪声检验方式

    2023-11-13 23:06:53
  • 详解Angular 中 ngOnInit 和 constructor 使用场景

    2024-05-11 09:18:05
  • Python爬虫进阶Scrapy框架精文讲解

    2022-08-21 06:00:16
  • Python利用format函数实现对齐打印(左对齐、右对齐与居中对齐)

    2021-07-30 05:16:16
  • python把转列表为集合的方法

    2021-06-03 07:28:41
  • 初学vue出现空格警告的原因及其解决方案

    2024-05-09 09:51:40
  • 详解一种用django_cache实现分布式锁的方式

    2023-11-08 03:50:45
  • Go语言数据结构之选择排序示例详解

    2024-04-26 17:25:33
  • 一个非常简单好用的Python图形界面库(PysimpleGUI)

    2022-12-25 08:17:09
  • 使用pickle存储数据dump 和 load实例讲解

    2023-05-19 18:50:18
  • 详解Node.js 中使用 ECDSA 签名遇到的坑

    2024-05-08 09:36:01
  • Python字符串拼接的4种方法实例

    2023-01-30 18:57:15
  • 提高MySQL数据库查询效率的三个实用技巧

    2008-12-03 16:40:00
  • caffe binaryproto 与 npy相互转换的实例讲解

    2021-10-22 15:38:48
  • MySQL的加密解密的几种方式(小结)

    2024-01-17 06:25:22
  • python中的tkinter库弹窗messagebox详解

    2023-11-12 04:02:05
  • python函数默认参数使用避坑指南

    2023-06-19 13:37:50
  • MySql学习笔记之事务隔离级别详解

    2024-01-21 23:54:28
  • Vue+Echarts实现简单折线图

    2024-05-29 22:42:25
  • asp之家 网络编程 m.aspxhome.com