2

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

3
  • А причем тут текст находящийся в кнопке?
    – Dimon
    18 фев 2021 в 9:56
  • на константный текст или он может быть разный? например при наведении всегда чтоб было написано "Купить". Опишите вопрос обширнее 18 фев 2021 в 9:57
  • при наведении будет всегда один и тот же текст
    – Dimon
    18 фев 2021 в 9:57

2 ответа 2

7

Текст будет изменяться при наведении (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>

4
  • 3
    жаль, нельзя два плюса поставить )) 18 фев 2021 в 10:06
  • 1
    Эх, надо было первый ответ тоже оставить. 18 фев 2021 в 10:08
  • 1
    @АлексейШиманский я думаю, так удобнее (не надо лезть в разные файлы). Но я могу вернуть его, если Вы считаете, что он необходим :D 18 фев 2021 в 10:10
  • 2
    @ВасяВоронцов думаю стоит, вторым вариантом добавить тоже. Пусть будет 18 фев 2021 в 10:12
2

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

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

btn.addEventListener("mouseout", function() {
  this.value = "Old Text";
})
 <input id="btn" type="button" value="Old Text">

2
  • 1
    в общем случае лучше брать новый текст из дата-атрибута, например.
    – teran
    18 фев 2021 в 10:02
  • 1
    @teran Как указал способов много. Предложил один 18 фев 2021 в 10:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.