JavaScript 经典实例：第三版

328

｜

第

12

章

元素将影响页面布局，把后续元素向下方和右侧推移，具体要看被隐藏的元素是何

种类型。

还有一种方法可以从页面视图中移除元素，即使用负的左移值把元素完全移到屏幕

范围之外。这样做是可行的，尤其是创建从左侧滑入的滑动条元素。如果有部分内

容想用辅助技术（

assistive technology

，

AT

）设备渲染，但是不希望用户看到，无

障碍功能社区就推荐使用这种方法。

12.15

创建悬停弹出信息窗口

12.15.1

问题

你想实现一种交互效果，当用户把鼠标悬停在缩略图上时显示额外的信息。

12.15.2

方案

这种交互效果涉及四个不同的功能。

首先，你要捕获每个缩略图的

mouseover

和

mouseout

事件，分别显示和隐藏弹出

窗口。在下述代码中，我们把事件处理函数（跨浏览器兼容）依附到页面中的所有

图像上。

window.onload = () => {

const

imgs = document.querySelectorAll('img');

imgs.forEach(img => {

img.addEventListener(

'mouseover',

() => {

getInfo(img.id);

},

false

);

img.addEventListener(

'mouseout',

() => {

removeWindow();

},

处理

HTML

｜

329

false

);

});

};

其次，你要获取鼠标悬停其上的那个元素的信息 ...