How to show the id of the button when hover over it

Question

Using the following code I can change the name of the button when user hovers over it. Is there a way to change the button's name with its id when user hovers over it (using JavaScript)?

 .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

You can use attr(id) . See the documentation for further information.

 .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

Here's one that changes things back...

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

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

Just add these events to the button.

Answer 3

Quite easy actually...

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

Just add this event to the button.