CSS实例讲解:地图提示
作者:blank 来源:蓝色理想 时间:2007-05-11 17:04:00
作者的BLOG:http://www.planabc.net/
地图弹窗(map pop)具体演示
运行代码框
这个实例,基本上是应用hover来实现隐藏/显示效果。
实例初始部分内容被隐藏,当hover时让其隐藏的内容显示。对于初始的隐藏我们可以通过,对父元素设置相对位置(position : relative;),对其要隐藏的子元素设置绝对位置(position : absolute;),然后对要隐藏的子元素设置margin属性,并给于无限大负值让其移动无限远隐藏,而当hover触发时,通过对隐藏的子元素重新设置margin值让其显示。对于图片中变化的部分我们可以通过hover时背景图的变化来实现。
首先我们要准备好分析用的图片,如下总共7张,或许有人要问,为什么背景触发的图片使用一张,而不使用5张。其实部分原因大家应该可以看出,就是以后维护的方便,修改一张图总比修改5张图片来的方便,其次使用5张图浏览器需要加载5次,而使用1张图浏览器只需要加载一次就行了。那或许有朋友要问了,那我把2张背景图放在一张上可以吗?按照你上面的理论,不是更方便吗?是的,放一张上从逻辑上是可以的,但有时候还要考虑到图片的大小和图片加载的速度。
标签:map,pop,css,hover
0
投稿
猜你喜欢
快速了解Python相对导入
2023-07-29 18:35:30
asp随机产生注册用户密码
2007-10-17 12:33:00
Python实现字符串模糊匹配方式
2023-11-10 09:30:35
Python 正则表达式实现计算器功能
2023-09-02 02:01:44
Python利用arcpy模块实现栅格的创建与拼接
2021-10-07 22:39:37
PHP echo()函数讲解
2023-06-05 18:50:54
浅谈PHP的数据库接口和技术
2024-05-02 17:13:49
Python查找算法之插补查找算法的实现
2021-03-12 08:16:57
Win10系统下Pytorch环境的搭建过程
2023-09-29 06:57:54
Python新手们容易犯的几个错误总结
2021-06-22 12:19:54
django使用图片延时加载引起后台404错误
2023-11-13 14:51:08
python引入requests报错could not be resolved解决方案
2022-08-28 08:24:45
Windows Server 2003下修改MySQL 5.5数据库data目录
2024-01-14 17:42:28
python tornado开启多进程的几种方法
2021-09-18 22:28:17
基于Python绘制世界疫情地图详解
2021-11-23 09:10:36
Python利用pdfplumber实现读取PDF写入Excel
2023-02-21 01:08:57
pyinstaller打包找不到文件的问题解决
2022-03-28 06:21:01
logrus日志自定义格式操作
2024-04-26 17:20:24
Python Tkinter之事件处理详解
2021-06-08 07:19:53
基于Python 装饰器装饰类中的方法实例
2023-10-11 04:10:22