如何在 div 悬停时开发编辑选项答案

【问题标题】：How to develop an edit option on hover of a div如何在 div 悬停时开发编辑选项
【发布时间】：2019-06-25 18:22:34
【问题描述】：

我正在尝试使用悬停选项在 div 的右上角显示一个小的编辑图像/按钮。我有一个动态创建的 x x y 单元格表。我想做的是在右上角有一个小编辑按钮，让我可以单击该按钮并弹出一个弹出窗口。

类似于以下内容：

悬停时向用户显示 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);
            }
        }

【问题讨论】：

标签： javascript css model-view-controller

【解决方案1】：

这将通过 CSS 完成。为这三个按钮添加“按钮”类并使用下面的 css。

.button {
    display: none;
}

div:hover + .button, .button:hover {
    display: inline-block;
}

【讨论】：

【解决方案2】：

当您将鼠标悬停在容器上时显示按钮，否则通过 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>

【讨论】：

谢谢！这对我有用，除了 btn 的位置需要是相对的而不是绝对的，否则即使我悬停也不会显示任何内容。
关于这个线程的另一个问题 - 我在 td 上有一个 onclick 函数，该按钮位于 `td.setAttribute('onclick', 'clicked(this);')` 中。当我单击按钮时，会触发 td 的 onclick。如何避免按钮单击时 td 的 onclick 调用？