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

Question

[Александр Тимофеев]

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

Comments

[Алексей Скляров]

не копируйте лебедева, он этого не любит

[ThunderCat]

Алексей Скляров, о, да! копируйте, он этого не любит, а я его не любит )

[ой всё]

Алексей Скляров, вы угрожаете от имени лебедева?
он об этом знает?

Answer 1

[Сергей Соколов]

Функция, меняющая цвет, всего в две строчки:

var randomColor = function(e){
  var r = () => Math.round(Math.random()*255);
  e.target.style.color = "rgb(" + [r(),r(),r()].join(',') + ")";
}

С jQuery её повесить, например, на заголовок вопроса тут:

$('H1.question__title').on('mouseover', randomColor);

Или на чистом JavaScript:

document.querySelector('h1.question__title')
  .addEventListener('mouseover', randomColor);

Answer 2

[Bhudh]

Только на днях для детишек развлекалку писал.

function pad(n){
	return n.length<2?'0'+n:n;
}
function rndHex(){
	var base = 16,
		resultNum = Math.floor(Math.random()*base*base).toString(base);
	return pad(resultNum);
}
function rndHexColor(){
	return'#'+rndHex()+rndHex()+rndHex();
}
function changeColor(){
	this .style.backgroundColor=rndHexColor();
}

document.getElementById('ID_of_element').addEventListener('mouseenter', changeColor);

Answer 3

[ReeZo]

Пример с градиентом

Comments

[vparsek]

I’m Здравствуйте! Спасибо за крутую фишку.
Скажите пожалуйста, как правильно этот скрипт разместить на сайте wordpress? Через functions.php? Как потом привязать его к нужному блоку на сайте? Через класс вначале?
И еще — в идеале бы получить не градиент, а просто рандомные цвета. Поменял — не вышло(

[inistasu]

нужно создать скрипт js, подключить его к WP и туда добавить код, нужный блок привязывается через селектор
var block = document.querySelector('.block');
чтобы цвет получить вместо градиента нужно linear-gradient заменить на color и вызывать ф-ю один раз
e.target.style.background = randomColor();

Answer 4

[skepsikmod]

Ну можно так. Вернет строку в hex. Вешаете на hover к элементу
function getColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}