JavaScript实现猜图游戏

最新推荐文章于 2025-12-12 14:24:05 发布

原创最新推荐文章于 2025-12-12 14:24:05 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

文章介绍了如何使用HTML、CSS和JavaScript在页面上动态创建多个小div，并通过mouseover事件使它们在鼠标悬停时变为透明，从而实现点击图片时部分区域显示背景的效果。

一个大的div设置背景图片
覆盖的小div用代码动态生成
小div加onmouseover事件，事件代码中把它设为透明

效果如下

当点击图片时会露出设置好的背景

参考代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#outer{
				width: 400px;
				height: 400px;
				border: 1px solid wheat;
				background-image: url(img/2.png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}
			.inner{
				width: 40px;
				height:40px;
				background-color: black;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="outer">
			
		</div>
		
		<script type="text/javascript">
			let outer=document.getElementById('outer')
			for(let i=0;i<100;i++){
				let inner=document.createElement('div')
				inner.className='inner'
				outer.appendChild(inner)
			}
			// let innerElements = document.querySelectorAll('.inner');
			// innerElements.forEach(inner => {})
			outer.addEventListener('mouseover',(e)=>{
				let inner=e.target
				inner.style.backgroundColor = 'transparent';
			})
			
			
		</script>
	</body>
</html>