Как поменять текст кнопки при наведении на нее курсора средствами css или javascript?

Question

Как поменять текст кнопки button при наведении на нее курсора средствами css или javascript?

Answer 1

Средствами JS. Способов много предложу такой.

btn.addEventListener("mouseover", function() {
  this.value = "Updated";
})

btn.addEventListener("mouseout", function() {
  this.value = "Old Text";
})

 <input id="btn" type="button" value="Old Text">

Answer 2

Текст будет изменяться при наведении (CSS):

button::before {
  content: attr(text);
}

button:hover::before {
  content: attr(hover-text);
}

<button text="DEFAULT TEXT" hover-text="NEW TEXT FROM ATTRIBUTE">
</button>

Без использования функции attr():

button::before {
  content: "DEFAULT TEXT";
}

button:hover::before {
  content: "TEXT WHEN HOVER";
}

<button>
</button>

БЛОГ НА HUSL

Как поменять текст кнопки при наведении на нее курсора средствами css или javascript?

Ответы (2 шт):