master

分支 (2)

管理

管理

master

dev_test

web-test
/
DIVCSS鼠标经过悬停在图片上时图片上方显示文字.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>鼠标悬停图片上显示文字 在线演示 www.divcss5.com</title>
		<style>
			img {
				border: 0
			}

			/* css 注释说明：设置图片边框为0 */
			body {
				behavior: url("csshover.htc");
				text-align: center;
			}

			/* css注释说明：兼容ie6 支持标签使用hover */
			.divcss5 {
				position: relative;
				width: 554px;
				height: 346px;
				margin: 0 auto
			}

			.divcss5 a,
			.divcss5 span {
				display: none;
				text-decoration: none
			}

			.divcss5:hover {
				cursor: pointer
			}

			.divcss5:hover a.now {
				cursor: pointer;
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 100;
				left: 0;
				display: block;
			}

			.divcss5:hover span {
				display: block;
				position: absolute;
				bottom: 0;
				left: 0;
				color: #FFF;
				width: 554px;
				z-index: 10;
				height: 36px;
				line-height: 36px;
				background: #000;
				filter: alpha(opacity=60);
				-moz-opacity: 0.5;
				opacity: 0.5;
			}

			/* 设置显示文字定位位置，背景半透明 */
		</style>
	</head>
	<body>

		<div class="divcss5" style="background:url(imgexp.png)">
			<span>文字内容</span>
			<a href="#" class="now">&nbsp;</a>
		</div>

		<div class="divcss5" style="background:url(imgexp.png)">
			<span>欢迎访问DIVCSS5网站</span>
			<a href="http://www.divcss5.com/" class="now">&nbsp;</a>
		</div>

	</body>
</html>