CSS实例讲解:地图提示（4）
作者：blank 来源：蓝色理想 发布时间：2007-05-11 17:04:00
我们再来对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;
height:120px
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(/file/UploadPic/20075/20075111742681.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(/file/UploadPic/20075/20075111742681.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(/file/UploadPic/20075/20075111742681.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(/file/UploadPic/20075/20075111742681.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(/file/UploadPic/20075/20075111742681.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将换行显示。
再看下整体效果：
运行代码框
对于隐藏/显示，还可以通过定义了绝对位置的子元素left负值无限远，并物理隐藏（visibility:hidden）或者通过改变display属性来实现。有兴趣的朋友可以尝试一下用上面的两种思路来实现。就当作为这堂课的作业！
0
投稿猜你喜欢
- 如何正确显示模式对话框中的中文？msg.htm <html> <head> &nbs
关于“登录”和“注册”的问题已经被很多设计师和交互设计上写过无数遍了，今天我在登录纳米盘网站时受到打击了所以写下此文。事情是这样的：当初租用- 今天想围绕“产品交互设计”说说一些我们的想法，一说到产品设计，我想在坐的各位脑海里肯定联想到了很多表单设计、导航设计、界面布局等等，但是今天
- 当你连接到MySQL服务器时，你应使用一个密码。密码不以明文在上传输。客户端连接序列中的密码处理在MySQL 4.1.1中已经升级，很安全。
- 代码如下:---1.平均销售等待时间 ---有一张Sales表，其中有销售日期与顾客两列，现在要求使用一条SQL语句实现计算 --每个顾客的
- Event是Javascript中的重要事件，event代表事件的状态，专门负责对事件的处理，它的属性和方法能帮助我们完成很多和用户交互的操
- 内容摘要：当讨论Request对象内容时，要研究的集合之一就是ServerVariables集合。这个集合包含了两种值的结合体，一种是随同页
- 数据挖掘查询任务根据 Analysis Services 内置的数据挖掘模型运行预测查询。预测查询通过使用挖掘模型来创建对新数据的预测。例如
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- 代码如下:ALTER function [dbo].[GetOrderNum]( @ebaystockflag varchar(20)//规
- 前三篇文章中，明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。Blueprint的实现Blueprint是一个
- 如果你经常浏览网页一定见过很多网站在form表单中的文本域（textarea）中添加了的背景图片，一般是使用网站的logo，我记得我最早注意
- 一直以来，我们大多使用js来实现弹出菜单，可是根据 w3c 的css标准，根本就没有这个必要。只需要简单得使用css+html就可以做出一个
- 在CSS规范中有一个渲染对象的概念，通常用一个盒子（box, rectangle）来表示。mozilla通过一个叫frame的对象对盒子进行
- 以下是我做美工的两年生活中一条条总结出来的经验，每一点都是我常用的，虽然不是什么大学问，但我觉得要互相学习才能提高，所以现在拿出来和大家一起
- <％MaxPerPage=8 ’定义页面最大的记录数为8<br>
- 在前面的文章中，我分别介绍了基于列表元素柱状图和基于表格元素柱状图的实现方法，虽然方法比较简单，但是它却包含了基本的实现原理。在了解了前面两
- javascript版 俄罗斯方块（Russian box）小游戏，喜欢的朋友可以玩玩。对源代码感兴趣的朋友也可以研究一下。玩法介绍：可以输
- 原来的题目设想为界面视觉效果的统一性，但是“统一”这个词似乎有点敏感，怕触动萌点无数，而我也无意去设定一个什么什么的统一性来侃侃而谈，极为专
- 无论安装何版本的mysql，在管理工具的服务中启动mysql服务时都会在中途报错。内容为：在 本地计算机 无法启动mysql服务 错误106
