Изменение текста JS при наведении курсора - PullRequest
Новая
       34

Изменение текста JS при наведении курсора

0 голосов
/ 27 ноября 2018

Я новичок в кодировании и JS.Я искал, чтобы начать на небольшом проекте, чтобы изменить текст (например, слово "кошка") на другой фрагмент текста (т.е. собака) при наведении?Пожалуйста, помогите, что-нибудь простое, чтобы начать меня.

Ответы [ 2 ]

0 голосов
/ 27 ноября 2018

Я полагаю, что то, что вы пытаетесь достичь, поднимает следующие два основных вопроса:

  1. Как изменить текст элемента?
  2. Как вы запускаете это изменение, когдазависание над элементом?

Чтобы ответить на свой первый вопрос, вы можете зайти на эту веб-страницу, чтобы узнать об основных манипуляциях с домом.Вы также можете взглянуть на следующий фрагмент кода, чтобы увидеть, как навсегда изменить текст с "cat" на "dog". 

var text = document.getElementById('text')
text.textContent = "dog"
<p id="text">
  cat
</p>

Чтобы ответить на второй вопрос, вы должны прочитать о eventlistener .В этом конкретном случае вы, вероятно, захотите использовать события mouseover и mouseout .Следующий фрагмент предоставит пример того, как их использовать: 

var text = document.getElementById('text')

text.addEventListener("mouseout", function() {
  text.textContent = "cat"
})

text.addEventListener("mouseover", function() {
  text.textContent = "dog"
})
<p id="text">
  cat
</p>

Поскольку вы, кажется, являетесь новым учеником, я также мог бы порекомендовать вам прочитать о window.onload , так как вы можете столкнуться с некоторымипроблема при выполнении таких строк, как var text = document.getElementById('text') слишком рано.

Кроме того, вы можете взглянуть на разницу между innerHTML и textContent , как упомянуто Nick Parsons вкомментарий.На самом деле в этом случае лучше использовать textContent, поскольку мы хотим изменить только текст.

0 голосов
/ 27 ноября 2018

Этот код изменяет текст ссылки на то, что у вас есть в «data-change», и снова возвращает его обратно при наведении мыши. 

<a href="#" data-change="Dog" onmouseover="changeMe(this)" onmouseout="changeMe(this)">Cat</a>

<script type="text/javascript">
  function changeMe(el) {
    newText = el.getAttribute('data-change');
    oldText = el.innerText;
    el.setAttribute('data-change', oldText);
    el.innerText = newText;
  }
</script>

Тест: https://codepen.io/anon/pen/MzBQod

...