使用javascript回滚按钮可见性

我有一个问题需要你的支持。也许有人有主意

我有一个带有按钮的桌子，当鼠标放在桌子上时，它的可见性：隐藏

可见性：隐藏

更改为

可见性：可见

。此代码可在函数

changePosition

中找到

如果鼠标不在桌子上，如何回滚到可见性：隐藏

我的密码是贝娄 下面是它现在如何工作的示例

提前谢谢你

window.onload=addEvents；
函数addEvents（）{
让单元格=document.queryselectoral（“td”）；
对于（元素=0；元素1）{
表.deleteRow（currentRow）；
}  
}
函数deleteCol（）{
let table=document.querySelector（“.square table”）；
对于（行=0；行1）{
table.rows[row].deleteCell（currentCol）；
}
}
}
函数appendRow（）{
var table=document.querySelector（“.square table”）；
var new_row=table.rows[0].cloneNode（true）；
对于（单元格=0；单元格<新的\u行.children.length；单元格++）{
new_row.children[cell].onmouseover=function（）{
改变位置（这个）}
}
表.appendChild（新的_行）；
}
函数appendCol（）{
var table=document.querySelector（“.square table”）；
对于（row=0；row

/*概述*/
* {
保证金：0；
填充：0；
}
身体{
填充顶部：150px；
填充底部：150px；
显示器：flex；
证明内容：中心；
}
分区方形页面项目{
位置：相对位置；
显示：内联块；
}
按钮，方形按钮{
宽度：50px；
高度：50px；
边界：无；
背景重复：无重复；
背景位置：中心；
位置：绝对位置；
}
方桌{
边框：1px实心#48aae6；
左边距：自动；
右边距：自动；
}
分区方格{
宽度：50px；
高度：50px；
背景色：#48aae6；
}
/*钮扣*/
button.square-buttons\u add-col{
背景色：#f3a500；
/*背景图像：url（“../images/minus.png”）*/
顶部：3px；
右：-52px；
}
按钮。方形按钮\u del-col{
背景色：#b20000；
/*背景图像：url（“../images/minus.png”）*/
顶部：-52px；
右：2px；
可见性：隐藏；
}
button.square-buttons\u添加行{
背景色：#f3a500；
/*背景图像：url（“../images/plus.pngss”）*/
底部：-52px；
左：3px；
}
按钮。方形按钮{
背景色：#b20000；
/*背景图像：url（“../images/minus.png”）*/
左：-52px；
底部：2px；
可见性：隐藏；
}
/*动作中的按钮*/
按钮。方形按钮\添加列\活动：悬停{
背景色：#f6c052；
光标：指针；
显示：块；
}
按钮。方形按钮\u del-col\u激活：悬停{
背景色：#ca4c49；
光标：指针；
显示：块；
}
按钮。方形按钮\添加行\活动：悬停{
背景色：#f6c052；
光标：指针；
}
按钮。方形按钮\删除行\活动：悬停{
背景色：#ca4c49；
光标：指针；
}

1 1
1 2
1 3
1 4
2 1
2 2
2 3
2 4
3 1
3 2
3 3
3 4
4 1
4 2
4 3
4 4

您可以在

mouseout

上注册一个事件侦听器（当鼠标离开相应的元素时会触发），或者，我建议使用这个选项，只使用CSS来注册

在CSS中，这将是：

.yourclass {
  visibility: hidden;
}

.yourclass:hover {
  visibility: visible;
}

如果您确实想在JS中执行此操作，请在

addEvents

函数中：

for (element = 0; element < cells.length; element++) {
    cells[element].onmouseover = function() {
      changePosition(this)
    };

    /* ADD THIS */
    cells[element].onmouseout = function() {
      /* call here a function which set visibility to hidden */
    };
}

for（元素=0；元素

let minusCol = document.querySelector(".square-buttons_del-col"); let minusRow = document.querySelector(".square-buttons_del-row"); document.querySelector(".square-table").addEventListener("mouseleave",function() { minusCol.style.visibility = "hidden"; minusRow.style.visibility = "hidden"; });