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
投稿猜你喜欢
- OOM全称"Out Of Memory"，即内存溢出。内存溢出已经是软件开发历史上存在了近40年的“老大难”问题。在操作
前言在设计用例的时候,有些用例只是参数数据的输入不一样,比如登录这个功能,操作过程是一样的.如果重复去写操作过程会增加代码量,对应这种多组数- 下面对实现页面定时跳转（也称倒计时跳转）做一下总结，各种定时跳转代码记录如下： （1）使用setTimeout函数实现定时跳转（如下代码要写
- 如下所示：sum = 0n = 99while n > 0: sum = sum + n n = n - 2p
- 1 . 如何让自己的本地APACHE服务器支持.htaccess 如何让自己的本地APACHE服务器支持”.htaccess”呢?其实只要简
- 要达到二级名的效果，必须一下条件以及流程：1、必须有一个顶级域名，而且此域名必须做好泛解析并做好指向。2、必须有一台属于你的独立的服务器。泛
- 在用csv.writer写入文件的时候发现中间有多余的空行。最早打开方式只是‘w'，会出现多余的空行，网上建议使用binary形式‘
- ASP中从数据库读取二进制文件数据代码：<％driver_name1="DRIVER={Microsoft&n
- 1 unittest框架unittest 是python 的单元测试框架，它主要有以下作用：提供用例组织与执行：当你的测试用例只有几条时，可
- 很简单的教程，献给喜欢SEO的朋友们。把article.asp?logID=26 替换成article.asp?/a
- ppt通过其精美的可视化技巧以及良好的演示效果，成为了职场人士的必备技能。ppt的设计是一门大学问，无论是设计技巧，还是操作方法，都衍生出了
- eval 跟json.loads 是不一样的函数，是有实现不一样功能的地方，但是在某些地方它们两个函数的功能是一样的，在这个时候如果对执行效
- 本文实例为大家分享了python多线程同时接受和发的具体代码，供大家参考，具体内容如下'''模仿qq 同时可以发送信
- MySQL多个left join on关联条件顺序注意：下面的案例特别重要！请重视！SQL有点长，但确实是干货！结论如果存在多个left j
- 简单四则运算语法树可视化前几天有一篇博客是关于四则运算和二叉树的，我是把四则运算用二叉树写出来（我是用的 JSON 的形式来存储和表达的），
- 目录精确调整工作表的行高和列宽批量更改多个工作簿的数据格式批量更改工作簿的外观格式设置字体格式修改字体为宋体修改字号字体加粗字体颜色单元格填
- 如下所示：arrs=[2,15,48,4,5,6,7,6,4,1,2,3,6,6,7,4,6,8]f=open('test.txt&
- 前言我们平时的工作中可能需要和服务端建立链接，从而来接受服务端推送的数据，常用的就是eventSource，我们平时常用的就是通过get的方
- 目录元组1.什么是元组tuple2.元组tuple支持什么数据类型3.元组tuple的基本特征4.如何声明一个元组tuple5.玩转元组tu
- 搞了一上午，头都大了！最终解决问题。其实这问题老早就遇上了，但是比较懒，三下两下没整好便推开了搜索了一下，产生< msxml3.dll
