可以使用 JavaScript 的 mouseenter
和 mouseleave
事件来实现。
首先,你需要在网页中的相应元素(例如表格中的单元格)上绑定这两个事件的监听函数。在 mouseenter
事件的监听函数中,可以使用 display
属性将标签显示出来;在 mouseleave
事件的监听函数中,可以使用 display
属性将标签隐藏起来。
例如:
let tableCells = document.querySelectorAll('td');
for (let i = 0; i < tableCells.length; i++) {
let cell = tableCells[i];
cell.addEventListener('mouseenter', function() {
this.querySelector('label').style.display = 'block';
});
cell.addEventListener('mouseleave', function() {
this.querySelector('label').style.display = 'none';
});
}
在这段代码中,我们首先获取了表格中所有的单元格,然后对每个单元格绑定了 mouseenter
和 mouseleave
事件的监听函数。在 mouseenter
事件的监听函数中,我们通过调用 querySelector
方法获取了单元格内的标签元素,然后将它的 display
属性设置为 block
,从而使标签显示出来;在 mouseleave
事件的监听函数中,我们将标签的 display
属性设置为 none
,从而使标签隐藏起来。