我正在尝试使用悬停选项在 div 的右上角显示一个小的编辑图像/按钮。我有一个由 y 个单元格动态创建的 x 表。我想要做的是在右上角有一个小的编辑按钮,允许我点击那个按钮并弹出一个弹出窗口。
用户悬停在 div 上时会看到选项。 这需要在 javascript 或 css 中完成吗?我正在使用 javascript 创建表,如下所示:
var col = document.getElementById("NoColumns").value;
var row = document.getElementById("NoRows").value;
if (col > 0 || row > 0) {
$("#tblDash").show();
$("#NumberOfColumns").val(col);
$("#NumberOfRows").val(row);
for (var x = 1; x <= row; x++)
{
tr = document.createElement('tr');
document.getElementById('table').appendChild(tr);
for (var i = 1; i <= col; i++) {
var td = document.createElement('td');
td.className = "drop";
td.id = x + ', ' + i;
td.setAttribute('onclick', 'clicked(this);')
td.appendChild(document.createTextNode(i));
tr.appendChild(td);
}
}
最佳答案
将鼠标悬停在容器上时显示按钮,否则通过 CSS 将其隐藏?
.container {
height: 200px;
width: 200px;
background-color: yellowgreen;
position: relative;
}
.container:hover > .btn {
display: block;
}
.btn {
display: none;
position: absolute;
top: 5px;
right: 5px;
}
<div class="container">
<button class="btn">Edit</btn>
</div>
关于javascript - 如何在悬停 div 时开发编辑选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54475009/