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

#javascript #html #jquery #css

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

Ответы

Ответ 1

function getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
    
    $('div').mouseenter(function(e){
        $(this).css('background-color', getRandomColor());
    });
div {
  width: 100px;
  height: 100px;
  background: #333;
}








Источник на функцию getRandomColor().


Ответ 2

window.addEventListener('DOMContentLoaded', function() {
  document.querySelector('.hot').addEventListener('mouseenter', function() {
    this.style.backgroundPositionX = (Math.random() * 100 | 0) + '%';
  });
});
.hot {
  border: 1px dashed Gray;
  height: 100px;
  width: 100px;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 7000% 100%;
  background-image: linear-gradient(to right, #FF0000, #FFA500, #FFFF00, #008000,
#0000FF, #000080, #800080);
  transition: background-position 1.2s ease-in-out;
}