My issue revolves around a collection of dynamically generated classes, each associated with a specific color. Take the following example class:
.magenta {
color: #7abbb8;
}
In my footer, there are several links that I want to inherit this class when <p> in the footer is hovered over:
(function($) {
$('footer p').hover(function() {
$(this).find('a').addClass('magenta');
});
})(jQuery);
This script successfully adds the class "magenta" to the <a> tag after hovering over the <p>, but the desired color (#7abbb8) is not applied. Utilizing !important could be a quick fix, but since these classes are dynamically generated, I prefer to avoid that approach. How can I achieve the same result differently?
// update
Upon further investigation, I realized that the issue lies elsewhere. Instead of altering the CSS for the class itself, I inadvertently changed the CSS for every element that already had this class. This means that the color will not automatically apply to new elements with this class. While jQuery may not offer a straightforward solution, there are potential plugins available that can add CSS rules directly to the stylesheet.