Как сделать так, чтобы несколько цветов при наведении указателя мыши отличались друг от друга? - PullRequest
Новая
       22

Как сделать так, чтобы несколько цветов при наведении указателя мыши отличались друг от друга?

2 голосов
/ 10 апреля 2020

Мне интересно, какой самый лучший и простой способ сделать состояние наведения ссылки одним из 5 различных предварительно выбранных цветов, и каждый раз, когда вы спускаетесь, а затем снова включаете, оно меняется.

то есть черный ссылка на «контакт» и при наведении курсора на него становится синим. Уберите курсор, а затем верните его по ссылке, и теперь он красный, и т. Д. c.

Я предполагаю, что js - лучший способ, но я еще не очень искусен.

Я также хотел бы знать, как сделать вышеупомянутое с divs (как я мог бы хотеть сделать по изображению или кое-чему подобному), если это - подобная концепция.

Спасибо за любую помощь !

1 Ответ

3 голосов
/ 10 апреля 2020

Это выполнимо в JavaScript, см. Пример ниже. Одна и та же концепция будет работать независимо от типа элемента. 

const colors = ['blue', 'black', 'orange', 'green', 'purple', 'teal', 'pink'];

document.querySelectorAll('div')
  .forEach(div =>
  {
    div.addEventListener('mouseover', () => {
      div._originalColor = div.style.backgroundColor;
      div.style.backgroundColor = colors[Math.floor(Math.random()*colors.length)]
    }, true);
    
    div.addEventListener('mouseout', () => {
      div.style.backgroundColor = div._originalColor;
    }, true);
  });
<div style="width: 300px; height: 200px; background-color: red; margin: 5px; display: inline-block;"></div>

<div style="width: 300px; height: 200px; background-color: red; margin: 5px; display: inline-block;"></div>
...