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
投稿猜你喜欢
1、将下载好的mysql压缩包解压到安装目录下2、新建文件 my.ini，放置到mysql安装目录下，内容如下：[mysql]# 设置mys- 本文实例讲述了Python实现给文件添加内容及得到文件信息的方法。分享给大家供大家参考。具体分析如下：经常会遇到给文件添加内容的时候，如果只
- 前言有时候我们做项目的时候往往会需要把数组里面一些重复的项去掉，但是原生JS有排序，有筛选等等，但是就是没有数组去重怎么办呢？这能怎么办，自
- 其实大家都知道sql语句的错误信息都可以在sys.messages表里面找到如：如果在执行语句在try...catch中 我们可以通过以下方
- 如下所示：# -*- coding: utf-8 -*-import osimport numpy as npimport pandas a
- 1. 前言由于近期有任务需要，要写一个能够处理Excel的脚本，实现的功能是，在A表格上其中一列，对字符串进行分组和排序，然后根据排序好的A
- 大家有没有这种感觉，一到国庆、春节这种长假，抢火车票就非常困难？各大互联网公司都推出抢票服务，只要加钱给服务费就可以增加抢到票的几率。有些火
- 如何计算 CPU 占用率？简单来说，进程的 CPU 占用率指的是 CPU 有多少时间花费在了运行进程上。在 Linux 系统里，进程运行的时
- python使用pyecharts库画地图数据可视化导库中国地图代码结果世界地图代码结果省级地图代码结果地级市地图代码结果导库from py
- 代码如下:DECLARE @c INT DECLARE @c2 INT SELECT @c = COUNT(1) FROM dbo.Spli
- 目录1.任务要求2.简单设计3.模块实现4.总结由于一些小原因，被迫开始了tkinter一次实战演练。在此做一些记录，总结以及给自己留一些轮
- 1.问题描述2.解决方案（1）Dataloader里面不用cv2.imread进行读取图片，用cv2.imread还会带来一系列的不方便，比
- 我们之前写的代码都没有对前端input框输入的数据做验证，我们今天来看下，如果做form表单的数据的验证在views文件做验证首先用文字描述
- 在Python中解析XML文件也有Dom和Sax两种方式，这里先介绍如何是使用Dom解析XML，这一篇文章是Dom生成XML文件，下一篇文章
- 不久之前，笔者一个在企业中从事网管工作的朋友向我求助关于SQL Server服务器内存升级后遇到的问题。原来，他们企业准备上一个企业邮箱系统
- 一、背景：在平时工作中有遇到端口检测，查看服务端特定端口是否对外开放，常用nmap，tcping，telnet等，同时也可以利用站长工具等w
- 动态添加表单项iview的动态添加表单很简单，只需设置好表单项为一个array，添加新项目的时候就push一个默认好的值，剩下的iview会
- 本文实例为大家分享了JS实现图片放大镜效果的具体代码，供大家参考，具体内容如下<!DOCTYPE html><html&g
- 目录优化排序查询避免重复获取刚刚修改的数据行懒加载的联合查询优化排序查询自定义变量的一个重要特性是你可以同时将该变量的数学计算后的结果再赋值
- Flask Script扩展提供向Flask插入外部脚本的功能，包括运行一个开发用的服务器，一个定制的Python shell，设置数据库的
