Random colour on mouse hover [FIXED]

Design help Custom code
1

Hello and thank you for reading.

I would like to achieve the following:
On mouse hover, a random colour from a library I made is displayed to fill the text of the menu.
I tried to find online but didn’t find anything.

Thank you for your help <3

2

You can do this with a small JS snippet: define your color array, then on mouseenter pick one with Math.random() and set it via element.style.color. Had to do this on a nav recently and it worked smoothly.

1 Like
3

Thank you, I’ll try it now and keep you updated. Thanks a lot!

4

Thank you so much, it worked amazingly.
For future reference, here is the JS Snippet I made:

const colors = [
//include your colours here, following a format like this: ‘#hexcode’, ‘#hexcode’, ‘etc’, ‘etc,
];
function getRandomColor() {
return colors[Math.floor(Math.random() * colors.length)];
}
document.addEventListener(‘DOMContentLoaded’, function () {
const navLinks = document.querySelectorAll(’.nav-element’); //replace nav-element with your own class name
navLinks.forEach(link => {
const originalColor = getComputedStyle(link).color;
link.addEventListener(‘mouseenter’, () => {
link.style.setProperty(‘color’, getRandomColor(), ‘important’);
});
link.addEventListener(‘mouseleave’, () => {
link.style.setProperty(‘color’, originalColor, ‘important’);
});
});
});

Hope this can help in the future, thanks again WebsiteMaintenance