当鼠标移动到一个盒子上的时候,另一个盒子显示对应的图片
发布网友
发布时间：2023-07-03 11:47
共1个回答
热心网友
时间：2024-06-04 10:25
1、获取需要操作的元素：鼠标移动到的盒子以及要显示图片的盒子。
2、为鼠标移动到的盒子添加mouseover事件*，并且设置回调函数，当鼠标进入盒子时触发该事件。
3、在回调函数中，获取要显示的图片的路径。
4、将获取的图片路径，设置到要显示图片的盒子的src属性中，使其显示出来。以下是示例代码：```html``````css/*CSS*/.box1{width:300px;height:200px;background-color:#f00;}.box2{width:300px;height:200px;background-color:#0f0;display:none;/*一开始隐藏起来*/}.box2.show{/*显示的样式*/display:block;}.img{width:100%;height:100%;}``````javascript//JavaScriptconstbox1=document.querySelector('.box1');constbox2=document.querySelector('.box2');constimg=document.querySelector('.img');box1.addEventListener('mouseover',function(){constimgSrc='./your-img-path';//图片路径img.setAttribute('src',imgSrc);box2.classList.add('show');//添加显示的样式});box1.addEventListener('mouseout',function(){box2.classList.remove('show');//移除显示的样式});```当鼠标移动到`box1`上时，会触发`mouseover`事件，然后在回调函数中，获取图片路径并设置到`img`元素的`src`属性上，并且添加显示的样式。当鼠标离开`box1`时，会触发`mouseout`事件，然后移除显示的样式。这样就可以实现鼠标移动到一个盒子上时，在另一个盒子显示对应的图片了。
