我们再来对span中的文字描述进行样式修饰，因为span开始是被隐藏的，所以设置只需在触发的情况下设置就可以了：
ul li a:hover span.offset span, ul li a:focus span.offset span, ul li a:active span.offset span {
display:block;
width:140px;
margin:5px;
}
隐藏显示效果我们是达到了，但具体的map触发范围，定位，还有背景的变换我们还没实现，继续往下探讨，仅以map01为例，其他雷同。
设置map01的宽度和高度，以及外边距位置：
ul li a#map01 {
width:80px;
height:60px;
margin-top:0;
margin-left:130px;
}
当触发时改变其背景图片（图片的位置注意和map01的外边距margin位置相对应）：
ul li a#map01:hover, ul li a#map01:focus, ul#cmp li a#map01:active {
background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -130px 0px;
}
设置触发后描述部分的位置，开始我们对于a元素设置了1px的边框，那么要让map01中的描述显示在右侧，并且和a元素的位置top相同，则要让类选择器为offset的span上移1px（我们通过margin-top的负值来实现），设置描述部分的外左边距，刚才我们设置了map01的外左边距为130px（ul的总宽为350px），那我们可以设置描述部分的外边距大于220px（350px-130px）。
ul li a#map01:hover span.offset, ul li a#map01:focus span.offset, ul li a#map01:active span.offset {
margin-top:-1px;
margin-left:230px;
}
根据上面map01的设置方法来设置map02/map03/map04/map05，如下：
ul li a#map02 {
width:110px;
height:75px;
margin-top:-50px;
margin-left:235px;
}
ul li a#map02:hover, ul li a#map02:focus, ul li a#map02:active {
background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -235px -10px;
}
ul li a#map02:hover span.offset, ul li a#map02:focus span.offset, ul li a#map02:active span.offset {
margin-top:-11px;
margin-left:125px;
}
ul li a#map03 {
width:75px;
height:95px;
margin-top:3px;
margin-left:115px;
}
ul li a#map03:hover, ul li a#map03:focus, ul li a#map03:active {
background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -115px -88px;
}
ul li a#map03:hover span.offset, ul li a#map03:focus span.offset,ul li a#map03:active span.offset {
margin-top:-89px;
margin-left:245px;
}
ul li a#map04 {
width:110px;
height:120px;
margin-top:-60px;
margin-left:5px;
}
ul li a#map04:hover, ul li a#map04:focus, ul li a#map04:active {
background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -5px -123px;
}
ul li a#map04:hover span.offset, ul li a#map04:focus span.offset, ul li a#map04:active span.offset {
margin-top:-124px;
margin-left:355px;
}
ul li a#map05 {
width:95px;
height:97px;
margin-top:-90px;
margin-left:240px;
}
ul li a#map05:hover, ul li a#map05:focus, ul li a#map05:active {
background:transparent url(/articleimg/2007/03/4514/map_flat_on.jpg) no-repeat -240px -153px;
}
ul li a#map05:hover span.offset, ul li a#map05:focus span.offset, ul li a#map05:active span.offset {
margin-top:-154px;
margin-left:120px;
}
可能有某些朋友看上面的map代码的位置有些糊涂了，下面几点或许有助于朋友们理解：
1、li元素设置为了内联行布局；
2、当一个li和另外一个li的大小超过ul的大小时，另一个li将换行显示。
再看下整体效果：
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
对于隐藏/显示，还可以通过定义了绝对位置的子元素left负值无限远，并物理隐藏（visibility:hidden）或者通过改变display属性来实现。有兴趣的朋友可以尝试一下用上面的两种思路来实现。就当作为这堂课的作业！
专题:http://www.qqread.com/css/p299538.html进入讨论组讨论。
相关专题
- CSS 菜单举一反三 (0次浏览)
- CSS Image Maps—图像地图 (0次浏览)
- CSS 全攻略(希望斑竹加精) (0次浏览)
- 7。1sp1风格制作之css解析 (0次浏览)
- HTML和CSS在Flash中的应用 (0次浏览)
- 通过Dreamweaver学习了解CSS (0次浏览)
- CSS实现文本渐变效果 (0次浏览)
- CSS Hack整理 (0次浏览)
- Photoshop做简单的xhtml+css网页 (0次浏览)
- 面向对象的XHTML与CSS编程 (0次浏览)
