const middle = document.querySelector('.middle') const large = document.querySelector('.large') middle.addEventListener('mouseenter',show) middle.addEventListener('mouseleave',hide) large.addEventListener('mouseover',show) large.addEventListener('mouseout',hide) let timeId = null function show(){ clearTimeout(timeId) large.innerHTML=`<img src=${middle.children[0].src} alt="">` large.style.display= 'block' } function hide(){ timeId = setTimeout(function(){ large.style.display = 'none' },200) }

这段代码是一个示例，它实现了当鼠标进入或离开元素时，更改另一个元素的显示内容和显示状态。

首先，通过 `document.querySelector` 方法获取了两个元素，分别是具有 `.middle` 和 `.large` 类名的元素。

然后，通过 `addEventListener` 方法为 `.middle` 元素添加了 `mouseenter` 和 `mouseleave` 事件的监听器，为 `.large` 元素添加了 `mouseover` 和 `mouseout` 事件的监听器。这样，当鼠标进入或离开这两个元素时，会触发相应的事件处理函数。

在事件处理函数 `show` 中，首先使用 `clearTimeout` 方法清除之前设置的定时器，然后通过 `innerHTML` 将 `.large` 元素的内容更改为 `.middle` 元素中的第一个子元素的 `src` 属性所对应的图片。最后，将 `.large` 元素的 `display` 属性设置为 `'block'`，以显示该元素。

在事件处理函数 `hide` 中，通过 `setTimeout` 方法设置了一个延迟执行的定时器，当鼠标离开 `.middle` 或 `.large` 元素后，将在 200 毫秒后执行定时器中的函数。该函数将 `.large` 元素的 `display` 属性设置为 `'none'`，以隐藏该元素。

这段代码的作用是实现了当鼠标进入 `.middle` 元素时，显示 `.large` 元素并展示与 `.middle` 元素中图片相同的内容；当鼠标离开 `.middle` 或 `.large` 元素时，隐藏 `.large` 元素。

希望能解答您的问题！如果还有其他疑问，请随时提问。