CSS实例讲解:地图提示（3）
作者：blank 来源：蓝色理想 发布时间：2007-05-11 17:04:00
标签：map,pop,css,hover
XHTML部分我们已经写好，下面将是我们对其表现的设计部分，即CSS部分。
首先我们清除一下元素默认的边距（内边距和外边距）和设置img的默认边框为0：
* {
margin:0;
padding:0;
}
img {
border:0;
}
我们定义下ul的样式，包括ul的预设标记，大小，高度，边框：
ul {
list-style-type:none;
background: transparent url(/file/UploadPic/20075/20075111742594.jpg) no-repeat 0 0;
width:350px;
height:250px;
border:1px solid #000;
}
对于li的显示方式设置内联（display: inline;）行布局：
ul li {
display:inline;
}
下面是我们讲解的重点，隐藏/显示效果。
对li中的a元素我们设置其块元素显示（display: block;），让其相对位置（position: relative;），并使链接不显示下划线。
ul li a {
position:relative;
display:block;
text-decoration:none;
}
让类选择器为offset的span隐藏，至于怎样隐藏文章开头已经分析了：
ul li a span.offset {
position:absolute;
margin-top:-9000px;
margin-left:-9000px;
}
如上已经实现了内容隐藏，现在我们制作考虑触发显示的效果：
ul li a:hover span.offset, ul li a:focus span.offset, ul li a:active span.offset {
color: #000;
background-image:none;
background-color:#ffffde;
border:1px solid #000;
display:block;
width:150px;
height:auto;
text-decoration:none;
cursor:pointer;
}
0
投稿猜你喜欢
- 无论是在小得可怜的免费数据库空间或是大型电子商务网站，合理的设计表结构、充分利用空间是十分必要的。这就要求我们对数据库系统的常用数据类型有充
- 我们可以先建立一个包含文件名，文件标题的待检索文件的数据库，然后，用ADO方式来访问它，并建立记录集对象。具体代码和说明见下：
总的来说视觉设计是一个很大的范畴，囊括了我们身边很多产品的再创作设计，比如工业产品设计，广告设计，新媒体设计，服饰设计，还有我们这里要讨论的- Server对象提供对服务器上访问的方法和属性.大多数方法和属性是作为实用程序的功能提供的。语法:Server.property|metho
- 今天 大白 问了一个关于CSS权重的问题：关于选择器权重的问题 。class的权重是10 标签权重是 1 。比如说 p span{} 权重是
- 如何让页面超时并指定一个超时时间？下面就是利用缓冲的程序页面事例： <％@ OutputCache Du
- 很简单，只需建立一个worksheet和Excel相关的信息就可以了具体代码见下：<％set xlApp =&nb
- 方法一：简单，得不到参数，只有一个虚拟路径 代码如下:GetUrl =request("url") 例如：http://
- 用javascript实现Base64编码—解决中文问题因javascript求出来的是Unicode要转换成Ansi后才能对它进行Base
- 在一次ASP程序中不能正常连接MSSQL出现出错信息如下：以下为引用的内容：HTTP/1.1 200 OK S
- YUI 中的 Grids CSS 主要有三个部分值得大家关注和学习：Yahoo!网站性能最佳体验的34条黄金守则—内容 1、布局的思想：使用
- 做教育业的网站，会将此遇到这个问题：如何在网页上显示音标？音标为什么显示为乱字符？等等类似的问题。前两天做沪江网某英语页面的时候也碰到了这个
- 看起来现在经常用到这样的效果来提高用户体验，所以就没事写了一个输入框提示列表的效果使用宽屏的朋友麻烦帮忙测试下，列表的位置有没有错位。代码可
- 使用本文提供的JavaScript脚本，配合Dreamweaver的层和行为的运用，可以在页面中显示可拖动的精美月历。具体制作步骤如下：1、
- 首先你要确定错误的原因： 让IE显示详细的出错信息： 菜单--工具--Internet选项--高级--显示友好的HTTP错误信息，去掉这个选
- 有没有想过用尺子来直接量网页上的区块间距，文字行高？屏幕标尺就是干这个的。这个功能非常适合F2E在调试样式尺寸的时候使用。打开屏幕标尺，屏幕
- 相对于Firefox2来说，Firefox3除了采用全新的Gecko 1.9引擎外，在性能、稳定性和安全性方面进行许多改进，在我们最关心的对
- 如何验证信用卡是否可用，合法？ 核实信用卡的真伪是一件麻烦的事儿，看看下面的代码，也许会给你帮上忙：<Script
- 基本上快被这个问题搞疯了，症状如下症状描述：在ie下（6或7，8没有试过）当出现中英文混排，都采用默认字体时，并使用 li 列表做float
- 只添加了一些自己想到的常用的功能,欢迎大家补充添加自己的好的思路. 通用的正则和方法可以写在RegExpObj中,
