一个大的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>
2587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
