CODEWITHSUNDEEP
jqueryhtml
ini
ini

Reputation: 201

Setting hex colors with jquery

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/

Upvotes: 2

Views: 16928

Answers (2)

Jessica Brown
Jessica Brown

Reputation: 8312

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 ;-)

Upvotes: 3

James Montagne
James Montagne

Reputation: 78630

: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.

Upvotes: 0

Related Questions