Setting hex colors with jquery

Question

I have a class setup in my style sheet for the UI, and a preferences section where the user can use a color-picker to style the page. The values are stored in the db as hex, but when I use those values to update the page via jQuery:

$nav.css("background-color", button_bg_color)

I lose the NEW :hover colors. The non-hover colors change correctly, but I see they get converted to RGB format, and I'm guessing that this is causing the issues with the :hover values. I figure I can change my code and have the class change on hover to get around this, but is there a way to get jQuery to set the colors using the hex values? Or is there something else I'm missing?

UPDATE: James Montagne is right in that you can't change the :hover effect, so I changed it to a class. Now, using the hover() function, I'm still missing something: Fiddle: http://jsfiddle.net/Y9EBt/6/

they are not converted into RGB, your browser's inspector shows them as RGB, however RGB(r,g,b) and #rrggbb formats are completely identical — haynar, Sep 14 '12 at 01:03
Do you mean this? http://jsfiddle.net/T3ZAg/ In that case, your issue is caused by jQuery's `.css()` method which is setting the color as an inline style. This inline style then overrides the `:hover` declaration from the style-sheet. — Šime Vidas, Sep 14 '12 at 01:04
if you need to preserve the hover style just add `!important` to the style — haynar, Sep 14 '12 at 01:18
Can you provide a fiddle so that it makes easier to answer your question — Sushanth --, Sep 14 '12 at 01:38
I'll work on the fiddle right now - but the issue isn't losing the original :hover, its that the new :hover isn't taking effect. And, is it normal for the inspector to show the color values as hex on the page load, but rgb after the changes? I understand that they end up being the same value, but can they be interpreted differently for CSS? — ini, Sep 14 '12 at 17:46
Through alerts, I've found that its simply not changing the nav_hover class, nor can I get the css info about the class. http://jsfiddle.net/Y9EBt/9/ — ini, Sep 15 '12 at 00:33

score 3 · Accepted Answer · edited May 23 '17 at 11:55

There's a problem here, "Javascript doesn’t support getting or setting the attributes of pseudo selectors, meaning that you cannot get the :hover css style directly." [source]

JQuery, does however have a .hover() function which could probably be used to change the hover item's css indirectly. Example: jQuery CSS Hover

Edit: Here is a fiddle where I show it working: http://jsfiddle.net/TvfB9/1/

The key points are:

I created a global variable in the javascript (outside of the document ready function): hover_color = "#00FFff"; for storing the user's "new" or "desired" hover color. Ideally, you'd probably want to initialize this to whatever is in the stylesheet on page load.
Then inside the change color function, I update the global variable: hover_color = hover_text_color;. In this example I'm assigning it the variable you were already using in your fiddle, but hover_text_color should be replaced with whatever value the user picks from your picker controls.
I added a hover function to the document ready javascript object, and set the CSS for the .nav class from the global variable.

    $('.nav').hover(function() {
        $(this).css('color', hover_color ); 
    },
    function() {
        $(this).css('color', '#ffffff');
    });

Basically, when you set the CSS with .CSS it actually applies the CSS to the "style" attribute of the particular tags that have that class attached, it doesn't modify the CSS file in memory or anything. So by the time you run the hover function, it's pretty much forgotten about the changes you tried to make to your CSS class.

For the sake of laziness I only make the foreground color change, and left the non-hover foreground color hardcoded, obviously, you won't want to ;-)

This looks like an easy solution that will work, yet I still can't get the nav_hover to take affect: http://jsfiddle.net/Y9EBt/5/ any ideas? — ini, Sep 14 '12 at 21:12
I have updated my answer to address how to fix the updated closer to working fiddle — Jessica Brown, Sep 15 '12 at 21:39
null reference, please post your follow up question as a new question. you'll get more answers that way :) — Jessica Brown, Aug 04 '14 at 14:22

score 0 · Answer 2 · edited May 23 '17 at 12:12

:hover cannot be used in that way as a selector. The idea of a selector is that jquery will find all elements on the page which currently match the selector. Though :hover I beleive is not a valid selector at all, if it was, the idea would be to find all elements which were currently hovered on, as that is how selectors work.

Furthermore, using .css to style an element essentially just adds values to the style attribute of the element. So, since it is not possible to set the hover css directly in the style attribute, you cannot set it using .css.

Setting hex colors with jquery

2 Answers2