I'm struggling with managing custom colored elements on my website.
For instance, I have a hundred navigation squares on the site, each with its own unique color. The only solution I can think of is creating separate CSS classes for each color, but that will result in an overwhelming amount of CSS code.
Any help or suggestions would be greatly appreciated. Thank you!
*I've added JavaScript & JQuery tags as possible solutions to this issue
Update: Thank you for all the responses. To provide more context, I have square category navigation on my search page where colors can either come from the server side or be stored in client-side JS. I receive a list of categories from the server (each with an assigned color), and then I create all the squares. By default, they are white but change color on hover. Here's how I currently approach this:
<ul id="squares">
<li class="greencolor"></li>
<li class="redcolor"></li>
<li class="bluecolor"></li>
</ul>
Using CSS:
#squares li.redcolor:hover{
background:red;
}
#squares li.greencolor:hover{
background:green;
}
#squares li.bluecolor:hover{
background:blue;
}
As you can see, this approach results in a lot of CSS code for 100 elements.
While I understand I could use a solution like this:
var colorsMap={'redcolor':'red','greencolor':'green'};
$('#squares li').on('hover',function(e){
$(this).css('background-color', colorsMap[$(this).attr('class')];
});
I don't find it elegant and prefer finding a way to handle this through CSS rather than inline JS changes.