html+css點亮燈泡

材料:

一張燈亮的圖片,一張不亮的圖片

效果:

鼠標觸發後:

 代碼:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#bg{
				width: 100px;
				height: 180px;
				border: 1px dashed darkcyan;
				background: url(img/light.png) no-repeat;
			}
			#bg:hover{
				background: url(img/light_light.png) no-repeat;
			}
		</style>
	</head>
	<body>
		<div id="bg" onmousemove="change()">		
		</div>
	</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章