素材网 素材网

纯CSS制作地图图像映射效果

下载资源()次

阅读次数()次

发布时间:2014-06-08

纯CSS制作地图图像映射效果
分享到:

用法简介:

来源:xw素材网

纯CSS制作地图图像映射效果。
文件引用:

.asia {
	width: 215px;
	height: 175px;
	top: 1px;
	left: 283px;
}
.australia {
	width: 114px;
	height: 95px;
	top: 152px;
	left: 432px;
}
ul#continents1 li a, ul#continents2 li a, ul#continents3 li a  {
	display: block;
	outline: none;
	height: 100%;
}
ul#continents1 li a, ul#continents2 li a  {
	text-indent: -9000px;
}
ul#continents2 li a:hover, ul#continents3 li a:hover {
	background: url(images/map.png) no-repeat 0 0;	
}
ul#continents2 li.northamerica a:hover, ul#continents3 li.northamerica a:hover {
	background-position: 0 -270px;
}
ul#continents2 li.southamerica a:hover, ul#continents3 li.southamerica a:hover {
	background-position: -226px -273px;
}
ul#continents2 li.africa a:hover, ul#continents3 li.africa a:hover {
	background-position: -209px -417px;
}
ul#continents2 li.europe a:hover, ul#continents3 li.europe a:hover {
	background-position: -22px -427px;
}
ul#continents2 li.asia a:hover, ul#continents3 li.asia a:hover {
	background-position: -363px -268px;
}
ul#continents2 li.australia a:hover, ul#continents3 li.australia a:hover {
	background-position: -412px -455px;
}
ul#continents3 li a span {
	display: none;
}
ul#continents3 li a:hover span {
	display: block;
}
ul#continents3 li a:hover span {
	display: block;
	padding: 5px;
	width: 150px;
	background: #000;
	position: relative;
	top: 50%;
	font: 11px Arial, Helvetica, sans-serif;
	opacity: .75;
	filter:alpha(opacity=75);
	color: #FFF;
}
ul#continents3 li a:hover span strong {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
	text-decoration: underline;
}


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。