Archive

Posts Tagged ‘:hover’

全兼容的纯CSS级联菜单制作要点浅析

5月 20th, 2009
14 comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

这次给云南移动网上营业厅做的级联菜单使用了纯CSS的方式，霍霍，能用CSS做的，就用CSS完成吧。^-^

早已有前辈完成过这样的实例了，我以为我能顺利完成，但没想到处处碰壁，故记录一点心得如下，供大家参阅。

废话不多说，咚咚咚，开始制作啦！！！

除了IE6这个坚强的孩子，其他浏览器攻克还是比较容易的。

提示：你可以先修改部分代码再运行。

该实例完成大概就两个要点：

1. 忌浮忌躁，一步步来，先把最低级的display:none;掉。

2. “:hover伪类”的使用，默认状态“display:none;”，“:hover”时则“display:block;”则能很容易完成。

而IE6下折腾就比较复杂了，经过头破血流的教训之后，总结出关键四点：

1. 原理：IE6仅<a>标签支持:hover伪类，但如果a标签里面再嵌入a标签，里面的a标签将不会生效，所以必须在之间套加一层<table>；

  1. <!–[if IE 6]><a href="#nogo"><table><tr><td><![endif]–>
  2. 内容部分可以含有<a>标签
  3. <!–[if IE 6]></td></tr></table></a><![endif]–>

2. 关键样式名：这个用于:hover效果的a标签的命名，如果使用与<li>一致的样式名（在非IE6中是li:hover产生的效果），将不用再另写样式代码，不仅节省了代码开销，而且可维性更好；

  1. <li class="li">
  2. <!–[if IE 6]><a class="li" href="#nogo"><table><tr><td><![endif]–>
  3. 内容部分可以含有<a>标签
  4. <!–[if IE 6]></td></tr></table></a><![endif]–>
  5. </li>

3. visibility的使用：采用display的话将出现onmouseout时上一次显示的optionGroup仍然不消失的情况

  1. .c_subNav .li:hover ul { visibility:visible;}

4.table的设置：[含泪ing]table一定要记得width:100%;啊，一定要记得啊，一定要记得啊，一定要记得啊……

最后完成效果：

提示：你可以先修改部分代码再运行。

Chomo xhtml+css , , ,

图标组中鼠标经过图标显示详细信息

4月 17th, 2009
11 comments

[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系统：Windows]

一个电影图标（我觉得叫“海报缩图”不动听），鼠标滑过时显示它的名称和简介，这样的效果做起来很容易，稍稍利用:hover伪类便可实现。

提示：你可以先修改部分代码再运行。

然而这样的图标通常是成组出现的，于是就出现了一个问题：当鼠标滑过时，显示出来的详细信息将遮住其他的图标，从而使得“:hover”无法顺利触发。

提示：你可以先修改部分代码再运行。

要解决这个问题，关键在于如何使得现在被遮住的这个<a>也能触发:hover。
=> 被遮住的<a>能触发:hover吗？不能！
=> 那么现在问题转化为：如何使得现在被遮住的这个<a>不被遮住。
=> 事实上：<a>的一个子元素不被遮住即可。
=> 加一个透明的子元素便能实现了。

思路图（3D的也，透视的也，我真牛 ^-^）：

提示：你可以先修改部分代码再运行。

（编者按：炫不炫？好炫！——鼓掌。）

这是一个比较复杂的效果，在兼容性上还是存在一些问题，所以需要作情处理，其细节请参见demo中样式表的注释。
该效果的产生离不开对“层的叠加”的理解，如对此有疑问，请参阅我的相关文章：理解五条叠加法则，自由使用层的叠加

Chomo xhtml+css , ,