Как изменить фон на мышином с помощью множества цветов - PullRequest
Новая
       46

Как изменить фон на мышином с помощью множества цветов

0 голосов
/ 22 января 2020

Трудно понять, как изменить цвет фона из 3 абзацев на цвета в массиве на mouseenter, используя JavaScript. Какие-нибудь советы? Это мой массив: 

function changeColors() {
  var colors = ['pink', 'turquoise', 'green'];

1 Ответ

0 голосов
/ 22 января 2020

Допустим, ваш html выглядит следующим образом: 

<p class="my-paragraphs">Paragraph 1</p>
<p class="my-paragraphs">Paragraph 2</p>
<p class="my-paragraphs">Paragraph 3</p>

Ваш js создаст массив для этих целей, а затем динамически добавит стиль: 

function changeColors() {
  var colors = ['pink', 'turquoise', 'green'];
  var myParagraphs = document.querySelectorAll('.my-paragraphs');

  myParagraphs.forEach( function(paragraph, index){
    paragraph.addEventListener('mouseover', function(){
      paragraph.style = `background-color: ${colors[index]}`
    })
    paragraph.addEventListener('mouseout', function(){
      paragraph.style = ``
    })
  })
}

changeColors()

Вот кодовая ручка

Существует миллион способов сделать это, но я рекомендую вместо массива в javascript с именами цветов создавать css классы, содержащие background-color: anyColorYouLikeByPinkFloyd пара ключ-значение, а затем используйте javascript для добавления и удаления классов из ваших абзацев. Программное изменение атрибута style в JS следует использовать с осторожностью.

Вот кодовое перо, которое достигает того же эффекта с css классами . Чуть более многословно, но безопаснее. Программная перезапись style="", как я делал в предыдущем коде, удалит все другие стили, которые могут быть прикреплены к вашему элементу.

...