css3不同区域显示提示信息

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3不同区域显示提示信息的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯css实现的在图片不同区域显示提示信息的效果</title>
<style type="text/css">
		#map {
			margin:0;
			padding:0;
			width:400px;
			height:250px;
			background:url(map.jpg) top left no-repeat #fff;
			font-family:arial, helvetica, sans-serif;
			font-size:8pt;
		}
		
		#map li {
			margin:0;
			padding:0;
			list-style:none;
		}
		
		#map li a {
			position:absolute;
			display:block;
			/*
			   Specifying a background image
			   (a 1px by 1px transparent gif)
			   fixes a bug in older versions of
			   IE that causeses the block to not
			   render at its full dimensions.
			*/
   			background:url(blank.gif);
   			text-decoration:none;
			color:#000;
		}
		
		#map li a span { display:none; }
		
		#map li a:hover span {
			position:relative;
			display:block;
			width:200px;
			left:20px;
			top:20px;
			border:1px solid #000;
			background:#fff;
			padding:5px;
 			filter:alpha(opacity=80);
			opacity:0.8;
  		}
	
		#map a.bunny {
			top:20px;
			left:60px;
			width:80px;
			height:90px;
		}
		
		#map a.parrot {
			top:1px;
			left:275px;
			width:50px;
			height:50px;
		}
		
		#map a.snail {
			top:135px;
			left:30px;
			width:50px;
			height:50px;
		}
		
		#map a.dog {
			top:100px;
			left:150px;
			width:115px;
			height:95px;
		}
		
		#map a.cat {
			top:65px;
			left:315px;
			width:70px;
			height:120px;
		}
	</style>
</head><body>

<br>

<ul id="map">
	<li><a class="bunny" href="#" title="Bunny"><span><b>Bunny Rabbit</b><br>
		Cute and fuzzy, with long ears and a fluffy tail. this cuddly bunny 
		makes a great pet.</span></a></li>

	<li><a class="parrot" href="#" title="Parrot"><span><b>Parrot</b><br>
		With a lifespan of up to 40 years, these bright, colorful birds 
		are wonderful life-long pets. One of only a few birds
		capable of learning to speak, parrots are intelilgent and
		highly social animals.</span></a></li>
		
	<li><a class="snail" href="#" title="Snail"><span><b>Snail</b><br>
		Snails are a wonderful addition to any aquarium-- just make
		sure that its tank-mates aren't going to eat it! Snails say
		"Meow."</span></a></li>
		
	<li><a class="dog" href="#" title="Dog"><span><b>Dog</b><br>
		Man's best friend, a protector and commrade of humans for
		centuries, dogs are faithful, loyal and loving companions.
		</span></a></li>
		
	<li><a class="cat" href="#" title="Cat"><span><b>Cat</b><br>
		Another popular pet, these felines were once viewd as a
		sacred creature amont the ancient Egyptians. Independant,
		sociable, and with a rumbling purr, cats make wonderful
		pets.</span></a></li>
</ul>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)