0
我需要您的支持与一个问题。也许有人有想法。回滚按钮与JavaScript的可见性
我有一个带按钮的表visibility: hidden，当鼠标在桌上时 visibility: hidden更改为visibility: visible。这个代码可以在函数changePosition中找到。
如果鼠标不在桌面上，如何回滚到visibility: hidden？
我的代码是波纹管 这里是例如它是如何工作的，现在link
预先感谢您！
window.onload = addEvents;
function addEvents() {
let cells = document.querySelectorAll("td");
for (element = 0; element < cells.length; element++) {
cells[element].onmouseover = function() {
changePosition(this)
};
}
document.querySelector(".square-buttons_add-col").addEventListener("click", appendCol)
document.querySelector(".square-buttons_add-row").addEventListener("click", appendRow)
document.querySelector(".square-buttons_del-col").addEventListener("click", deleteCol)
document.querySelector(".square-buttons_del-row").addEventListener("click", deleteRow)
}
var currentRow = 0;
var currentCol = 0;
function changePosition(currentCell) {
let top = currentCell.offsetTop;
let minusRow = document.querySelector(".square-buttons_del-row");
let left = currentCell.offsetLeft;
let minusCol = document.querySelector(".square-buttons_del-col");
minusCol.style.left = (left + 1) + 'px';
minusRow.style.top = (top + 1) + 'px';
currentCol = currentCell.cellIndex;
currentRow = currentCell.parentElement.rowIndex;
minusCol.style.visibility = "visible";
minusRow.style.visibility = "visible";
}
function deleteRow() {
let table = document.querySelector(".square-table");
let deleteRowButton = document.querySelector(".square-buttons_del-row");
let deleteRowButtonTop = deleteRowButton.style.top;
if (table.rows.length > 1) {
table.deleteRow(currentRow);
}
}
function deleteCol() {
let table = document.querySelector(".square-table");
for (row = 0; row < table.rows.length; row++) {
if (table.rows[row].cells.length > 1) {
table.rows[row].deleteCell(currentCol);
}
}
}
function appendRow() {
var table = document.querySelector(".square-table");
var new_row = table.rows[0].cloneNode(true);
for (cell = 0; cell < new_row.children.length; cell++){
new_row.children[cell].onmouseover = function() {
changePosition(this)}
}
table.appendChild(new_row);
}
function appendCol() {
var table = document.querySelector(".square-table");
for (row = 0; row < table.rows.length; row++) {
var new_cell = table.rows[0].cells[0].cloneNode(true);
new_cell.onmouseover = function() {changePosition(this)}
table.rows[row].appendChild(new_cell)
}
}/* general */
* {
margin: 0;
padding: 0;
}
body {
padding-top: 150px;
padding-bottom: 150px;
display: flex;
justify-content: center;
}
div.square-page__items {
position: relative;
display: inline-block;
}
button.square-buttons {
width: 50px;
height: 50px;
border: none;
background-repeat: no-repeat;
background-position: center;
position: absolute;
}
table.square-table {
border: 1px solid #48aae6;
margin-left: auto;
margin-right: auto;
}
div.square-cell {
width: 50px;
height: 50px;
background-color: #48aae6;
}
/*buttons*/
button.square-buttons_add-col {
background-color: #f3a500;
/*background-image: url("../images/minus.png");*/
top: 3px;
right: -52px;
}
button.square-buttons_del-col {
background-color: #b20000;
/* background-image: url("../images/minus.png");*/
top: -52px;
right: 2px;
visibility: hidden;
}
button.square-buttons_add-row {
background-color: #f3a500;
/*background-image: url("../images/plus.pngss");*/
bottom: -52px;
left: 3px;
}
button.square-buttons_del-row {
background-color: #b20000;
/*background-image: url("../images/minus.png");*/
left: -52px;
bottom: 2px;
visibility: hidden;
}
/*buttons during action*/
button.square-buttons_add-col_active:hover {
background-color: #f6c052;
cursor: pointer;
display: block;
}
button.square-buttons_del-col_active:hover {
background-color: #ca4c49;
cursor: pointer;
display: block;
}
button.square-buttons_add-row_active:hover {
background-color: #f6c052;
cursor: pointer;
}
button.square-buttons_del-row_active:hover {
background-color: #ca4c49;
cursor: pointer;
}<body>
<div class="square-page__items">
<!--start table 4x4-->
<table class="square-table">
<tr>
<td>
<div class="square-cell">1 1</div>
</td>
<td>
<div class="square-cell">1 2</div>
</td>
<td>
<div class="square-cell">1 3</div>
</td>
<td>
<div class="square-cell">1 4</div>
</td>
</tr>
<tr>
<td>
<div class="square-cell">2 1</div>
</td>
<td>
<div class="square-cell">2 2</div>
</td>
<td>
<div class="square-cell">2 3</div>
</td>
<td>
<div class="square-cell">2 4</div>
</td>
</tr>
<tr>
<td>
<div class="square-cell">3 1</div>
</td>
<td>
<div class="square-cell">3 2</div>
</td>
<td>
<div class="square-cell">3 3</div>
</td>
<td>
<div class="square-cell">3 4</div>
</td>
</tr>
<tr>
<td>
<div class="square-cell">4 1</div>
</td>
<td>
<div class="square-cell">4 2</div>
</td>
<td>
<div class="square-cell">4 3</div>
</td>
<td>
<div class="square-cell">4 4</div>
</td>
</tr>
</table>
<button class="square-buttons square-buttons_add-col square-buttons_add-col_active"></button>
<button class="square-buttons square-buttons_del-col square-buttons_del-col_active"></button>
<button class="square-buttons square-buttons_add-row square-buttons_add-row_active"></button>
<button class="square-buttons square-buttons_del-row square-buttons_del-row_active"></button>
</div>
</body>
这个任务是用js做的，坦克我现在就试试 –