如何开发悬停div时的编辑选项

<div class="hover-div">
  <span class="edit-option">编辑</span>
</div>

.hover-div {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
}

.edit-option {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  display: none;
}

.hover-div:hover .edit-option {
  display: block;
}

<div class="hover-div">
  <span class="edit-option" onclick="showEditBox()">编辑</span>
</div>

<div id="edit-box" style="display: none;">
  <input type="text" id="edit-input">
  <button onclick="saveChanges()">保存</button>
</div>

function showEditBox() {
  document.getElementById("edit-box").style.display = "block";
}

function saveChanges() {
  var editedText = document.getElementById("edit-input").value;
  // 执行保存操作
  // ...
  document.getElementById("edit-box").style.display = "none";
}