Как разработать опцию редактирования при наведении курсора

Question

Я пытаюсь использовать опцию наведения, чтобы отобразить маленькое изображение / кнопку редактирования в верхнем правом углу div.У меня есть динамически создаваемая таблица х на количество ячеек.То, что я хотел бы сделать, это иметь крошечную кнопку редактирования в верхнем правом углу, которая позволяет мне нажать на эту кнопку и вызвать всплывающее окно.

Что-то похожее на следующее:

, где пользователю предоставляются опции над 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);
            }
        }

Answer 1

Отображать кнопку при наведении курсора на контейнер, иначе скрыть ее с помощью 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>

Answer 2

Это будет сделано с помощью CSS.добавьте класс "button" к этим трем кнопкам и используйте css ниже.

.button {
    display: none;
}

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