CSS实例讲解:地图提示(3)
作者:blank 来源:蓝色理想 时间:2007-05-11 17:04:00
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;
}
标签:map,pop,css,hover
0
投稿
猜你喜欢
解决Python保存文件名太长OSError: [Errno 36] File name too lon
2021-01-22 06:30:49
python检测lvs real server状态
2021-12-12 21:21:36
MySQL查询重写插件的使用
2024-01-27 15:55:58
asp如何创建一个PDF文件?
2009-11-14 20:53:00
3个常用的JS时间代码
2009-03-22 15:29:00
vue阻止页面回退的实现方法(浏览器适用)
2024-06-07 15:24:10
python鼠标绘图附代码
2021-09-09 17:10:26
python中的Reportlab模块详解最新推荐
2023-04-09 21:33:46
新兴XML处理方法VTD-XML介绍
2008-09-04 14:42:00
MySQL数据库8——数据库中函数的应用详解
2024-01-23 18:18:07
asp 分页函数,可以显示 1,2,3,4,5... 前十页,后十页,下一页,上一页
2009-07-05 18:34:00
Go整合captcha实现验证码功能
2024-04-26 17:29:43
oracle数据库创建备份与恢复脚本整理
2023-07-13 00:57:20
python中random模块详解
2023-07-30 02:29:23
浅谈信息可视化
2010-03-10 10:55:00
python 绘制场景热力图的示例
2022-01-22 07:03:21
OBJECTPROPERTY与sp_rename更改对象名称的介绍
2012-01-29 18:04:39
复习Python中的字符串知识点
2022-09-13 07:32:49
Mysql中一千万条数据怎么快速查询
2024-01-15 06:57:05
Java+MySql图片数据保存与读取的具体实例
2024-01-22 01:07:31