Home/ Questions/Q 8541845
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T11:55:23+00:00

I have a class setup in my style sheet for the UI, and a

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 😉

    • 0