如何在表单元格中放置悬停按钮？

<form>
  <div class="cell">
    <input type="text" placeholder="输入内容">
    <button class="hover-button">悬停按钮</button>
  </div>
</form>

.cell {
  position: relative;
}

.hover-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

const cell = document.querySelector('.cell');
const button = document.querySelector('.hover-button');

cell.addEventListener('mouseover', () => {
  button.style.display = 'block';
});

cell.addEventListener('mouseout', () => {
  button.style.display = 'none';
});