当 hover 超过按钮时如何显示按钮的 ID

Question

使用以下代码，当用户将鼠标悬停在按钮上时，我可以更改按钮的名称。 当用户将鼠标悬停在按钮上时（使用 JavaScript），有没有办法用它的 id 更改按钮的名称？

 .button:hover span { display: none }.button:hover:before { content: "New name"; }.button:hover { background-color: #aaaaaa; }

 <button class="button" id="some_id"> <span>old name</span> </button>

Answer 1

您可以使用attr(id) 。 有关详细信息，请参阅文档。

 .button:hover span { display: none }.button:hover:before { content: attr(id); }.button:hover { background-color: #aaaaaa; }

 <button class="button" id="some_id"> <span>old name</span> </button>

Answer 2

这是一个可以改变事情的...

onmouseover="this.innerHTML=this.id;"

onmouseout="this.id=this.innerHTML; this.innerHTML='old name';"

只需将这些事件添加到按钮。

Answer 3

其实很简单...

onmouseover="this.innerHTML=this.id;"

只需将此事件添加到按钮。