Случайный цвет при наведении мыши - PullRequest
Новая
       34

Случайный цвет при наведении мыши

2 голосов
/ 28 сентября 2019

Я использую следующий код для изменения цвета.У меня есть: root {} в моем CSS.

У меня есть случайный цвет тени при каждой перезагрузке страницы, так что я почти все понял.Можно ли получить случайный цвет для каждого элемента при каждом «наведении»?

JS: 

function getColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

document.documentElement.style.setProperty('--shadowColor', getColor());

CSS для ссылки 

:root {
    --shadowColor: blue;
}

.nav a:hover {
    color: white;
    text-decoration: ;
    background-size: 1px 50px;

    text-shadow: -2px 0px var(--shadowColor);
}

1 Ответ

0 голосов
/ 28 сентября 2019

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

function getColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function setColor() {
  document.documentElement.style.setProperty('--shadowColor', getColor());
}
setColor();
:root {
    --shadowColor: blue;
}

.nav a:hover {
    color: white;
    text-decoration: ;
    background-size: 1px 50px;

    text-shadow: -2px 0px var(--shadowColor);
}
<div class="nav">
  <a href="#" onmouseover="setColor();"> Check the color item 1 </a>
  <a href="#" onmouseover="setColor();"> Check the color item 2 </a>
  <a href="#" onmouseover="setColor();"> Check the color item 3 </a>
</div>

Без использования onmouseover в строке HTML 

function getColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function setColor() {
  document.documentElement.style.setProperty('--shadowColor', getColor());
}

setColor();

document.body.addEventListener('mouseover', function (evt) {
if (evt.target.tagName === 'A') {
    setColor();
}
}, false);
:root {
    --shadowColor: blue;
}

.nav a:hover {
    color: white;
    text-decoration: ;
    background-size: 1px 50px;

    text-shadow: -2px 0px var(--shadowColor);
}
<div class="nav">
  <a href="#" > Check the color item 1 </a>
  <a href="#" > Check the color item 2 </a>
  <a href="#" > Check the color item 3 </a>
</div>
...