0

Here is my problem. I have a list of dynamically generated classes. Each class has a color. Here is example class:

.magenta {
    color: #7abbb8;
}

On the other side, I have some links in a footer. I want to use this class when <p> in footer is hovered:

(function($) {
    $('footer p').hover(function() {
        $(this).find('a').addClass('magenta');
    });
})(jQuery);

This code works perfect - I my a have class="magenta" after p is hovered. But... it doesn't have color: #7abbb8. It probably could be easly fixed with !important, but as I said, I have a lot of these classes, they are created dynamically, so I don't want to do that. How can I do that another way?

// edit

OK, the problem is somewhere else. I didn't changed classes css, I changed css of every element which had this class. So this color will not be added with class to new elements. Unfortunately there is no simple way to solve this with jQuery, but it seems there are some plugins adding CSS rules to the stylesheet.

Improve this question
6
  • 1
    try removing existing class and add which ever class you like to? Commented Aug 20, 2012 at 9:43
  • Added CSS as a tag since this is really a css questions since your script works fine. Commented Aug 20, 2012 at 9:43
  • What does your css look like? If you imply that it could be easily fixed via using !important, which css rules superseed .magenta? Commented Aug 20, 2012 at 9:45
  • as we all know, id has higher priority than class, why dont u add id instead of class? Commented Aug 20, 2012 at 9:47
  • Why not in-line style ` $(this).find('a').css({ color: "#7abbb8" }).addClass('magenta');`? Commented Aug 20, 2012 at 9:48

2 Answers 2

Reset to default
1

Check your style sheet for a:visited style Or try to give this style in your css.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Yes, that's what I want to do - but I have to do that from jQuery. The question is - how to do that?
I don't get it. Why don't you put in your CSS : footer p a.magenta, footer p a.magenta:visited, footer p a.magenta:focus, footer p a.magenta:hover { color: #7abbb8;}
One more time: this color is dynamic.
And what do you mean by dynamic, are you using LESS or some other CSS scripting thingy ?
I use JS to change color off class (user may change it with a color picker).
0

Try being more specific with your CSS:

footer p a.magenta {
    color: #7abbb8;
}

or you could always set the color directly :

(function($) {
    $('footer p').hover(function() {
        $(this).find('a').css('color', '#7abbb8');
    });
})(jQuery);

and make sure you target the right element, and that would be the element that actually contains the text you are trying to change.

Improve this answer

4 Comments

I can't do that. This color isn't fixed. That's why I use classes. They are also generated with JS.
Did you try increasing your CSS specificity, as that would probably fix it if you are specific enough and have the styles in the right order, it's all about order and specificity!
Yes, I know, and default a:link, a:visited etc. is more specific than a {color: x}. So look at the answer to @Vins: stackoverflow.com/questions/12035379/…
Well, yes it is, but again you are missing the point of specificity, all you have to do is be more specific then you where when setting the a:visited styles, and there is no :visited selector in jQuery either so that's not going to work, see this FIDDLE for specificity!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.