1. 程式人生 > >滑鼠移入顯示圖片案例

滑鼠移入顯示圖片案例

一.需要的效果

1).未移入前

2).滑鼠移入後

3).滑鼠移出

二.實現程式碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		a {
			position: relative;
		}
		a img{
			display: none;
			position:absolute;
			left: 50%;
			margin-left: -60px;
			margin-top: -2px;
		}
		a:hover img{
			display: block;
		}
	</style>
	<body>
		<a href="" class="text-muted">
    		<span>寵物之家</span><br />
    		<img src="img/pet_04.jpg"  alt="寵物之家" width="130px"/>
    	</a>
	</body>
</html>