Javascript 如何更改鼠标悬停按钮上的文本？

我需要制作一个按钮，当光标位于按钮上方时，该按钮会更改其中的文本，当光标离开框时，该按钮会重新更改。 我尝试过使用“document.getElementById（）.innerHTML”的VScode，但它只是在光标移动时更改文本，而不会返回到原始文本

按钮{
背景颜色：绿色；
边框颜色：白色；
边界半径：10px；
自对准：居中；
}
身体{
背景色：黑色；
}
h1{
颜色：绿色；
文本对齐：居中；
}
p{
颜色：黄绿色；
字体系列：Verdana；
字体大小：12px；
}
按钮：悬停{
背景：蓝色；
}

页面标题
网页
单击以显示日期和时间

现在几点？
var x=“现在几点了”；
document.getElementById（“time”）.innerHTML=x；

我要做的是在我的按钮中有两个

。第一个

将包含默认情况下要显示的文本。第二个

将包含要在

悬停

上显示的文本。默认情况下，此范围是隐藏的

然后，您可以向按钮添加事件侦听器。在

mouseover

上，隐藏默认文本并显示包含悬停文本的

span

。在

mouseleave

事件侦听器中，只需执行相反的操作

HTML:

---

您可以使用mouseenter和mouseleave事件，然后可以更改按钮的内部HTML

const btnEle=document.getElementById（“btn”）；
btnEle.addEventListener（'mouseenter'，e=>{
btnEle.innerHTML=“保存”；
});
btnEle.addEventListener（'mouseleave'，e=>{
btnEle.innerHTML=“提交”；
});

提交
请不要描述您的尝试。向我们展示您的尝试（发布代码），以便我们能够识别问题。
<button id="myid">
  <span class="default-text">Text 1</span>
  <span class="hover-text" style="display: none;">Text 2</span>
</button>

var button = document.getElementById('myid')

button.addEventListener('mouseover', function() {

    this.querySelector('.hover-text').style.display="block";
    this.querySelector('.default-text').style.display="none";
});

button.addEventListener('mouseleave', function() {

    this.querySelector('.default-text').style.display="block";
    this.querySelector('.hover-text').style.display="none";
});