Как изменить цвет текста при наведении в javascript?

Пользователь

willa_will

от willa_will , в категории: JavaScript , 3 года назад

28 | 0

programming

2 ответа

Пользователь

dmitrypro77

от dmitrypro77 , 3 года назад

@willa_will На самом деле Вы можете добиться этого без Javascript и используя :hover в CSS. Но если нужно именно Javascript, то добавьте addEventListener() на этот элемент и можно ловить события mouseover/mouseout и менять цвет текста при наведении, ниже код как пример:

<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <p class="inner-text">Тестовый текст</p>
</body>
<script>
    let text = document.querySelector(".inner-text")
    // Изменить цвет при наведении красный
    text.addEventListener("mouseover", (event) => {
        event.target.style.color = "red"
    })

    // Изменить обратно на черный
    text.addEventListener("mouseout", (event) => {
        event.target.style.color = "black"
    })
</script>
</html>

1 | 0

Всегда открыт для интересных проектов. Ссылки на мои соц. сети в профиле.

Пользователь

camren

от camren , 2 года назад

@willa_will

Вы можете изменить цвет текста при наведении с помощью JavaScript, используя событие onmouseover и onmouseout.

Вот пример кода, который изменяет цвет текста на красный при наведении на элемент с идентификатором myText и возвращает его к исходному цвету при отведении мыши:

1	<p id="myText" onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">Пример текста</p>

В этом примере мы используем атрибуты onmouseover и onmouseout, чтобы назначить функции, которые будут вызываться при наведении на элемент и отведении мыши от него соответственно. В функции мы используем свойство style.color, чтобы изменить цвет текста на нужный цвет (в данном случае, на красный при наведении и на черный при отведении мыши).

Вы также можете использовать отдельный JavaScript файл для определения этих функций, чтобы отделить логику от представления (HTML кода). Например:

<p id="myText">Пример текста</p>
<script>
  var text = document.getElementById("myText");
  text.onmouseover = function() {
    this.style.color = "red";
  };
  text.onmouseout = function() {
    this.style.color = "black";
  };
</script>

Этот код делает то же самое, что и предыдущий пример, но функции определены в JavaScript, а не в атрибутах HTML. Сначала мы находим элемент с помощью document.getElementById, а затем назначаем функции onmouseover и onmouseout, как в первом примере.

Обратите внимание, что в обоих примерах мы используем this для ссылки на текущий элемент, т.е. на элемент, на который наведена мышь.

0 | 0

Как изменить цвет текста при наведении в javascript?

2 ответа

Похожие обсуждения: