jQuery - Modifying an element's hover css

Question

I am creating a customize site page that dynamically changes the current page so that you can see a preview of what you are changing. Everything is working pretty well, except that the code I'm using apparently can't handle pseudo-classes such as :hover and :visited.

The code is very simple, I am basically doing the following:

$("#links td.active a:hover").css("color", "#ff0000");

However, this doesn't actually set the <a> tag's hover color to #ff0000. It works fine if I take off the :hover though. Anybody have an suggestions as to how to get this to work?

Thanks very much!

Edit 1: Apparently, I might be going about it wrong altogether. Some more information shows that I might be able to use document.styleSheets.inlinestyle.rules to modify it, although this apparently only works in IE. Any more ideas would be greatly appreciated.

What's wrong with using a:hover in css? how is that not elegant? — Lior Cohen
– Lior Cohen, Commented Nov 30, 2009 at 21:50
@Loir Cohen - I am attempting to update the current page's a:hover link based off of a selected color. I am actually compiling this to a stylesheet that gets added at the top of the page, but I don't want users to have to refresh the page to see their changes. — Topher Fangio
– Topher Fangio, Commented Nov 30, 2009 at 21:52
Here's an idea then: set some class name to a wrapper div containing your dynamic content and inject a <LINK> tag into the DOM containing a dynamically generated CSS file. There are many ways to tackle this problem, but not enough information was provided. — Lior Cohen
– Lior Cohen, Commented Nov 30, 2009 at 21:55
By putting the :hover into the selector string, you're using it as a filter, thats why the script stops working altogether while its in there. Take a look at docs.jquery.com/Selectors for info on them. — Rory
– Rory, Commented Nov 30, 2009 at 21:57

Lior Cohen · Accepted Answer · 2009-11-30 21:46:59Z

6

$('#links td.active a').hover(
  function()
  {
    $(this).data('prevColor', $(this).css('color')).css('color', '#FF0000');
  },
  function()
  {
    $(this).css('color', $(this).data('prevColor'));
  });

answered Nov 30, 2009 at 21:46

Lior Cohen

9,0652 gold badges31 silver badges27 bronze badges

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

Comments

Joel · Accepted Answer · 2009-11-30 22:13:05Z

1

An interesting approach may be to create new rules using a plugin like jQuery.Rules.

answered Nov 30, 2009 at 22:13

Joel

19.4k3 gold badges67 silver badges84 bronze badges

6 Comments

Topher Fangio Over a year ago

Yeah, I just found that, the demo page doesn't appear to do what I need. It works for everything except pseudo-classes. I also tried plugins.jquery.com/project/jquerycssrule which should work, but simply doesn't.

BYK Over a year ago

jQuery.CssRule seems to be the answer. How are you trying to use it?

Topher Fangio Over a year ago

@BYK - jQuery.cssRule(selector, attribute, color); Didn't seem to work for any selectors. I know the variables (selector, attribute, color) are correct because I printed them out.

BYK Over a year ago

Be careful with the usage. You need to do jQuery.cssRule({'selector': [['attribute1', 'attributeValue1'], ['attribute2', 'attributeValue2']]});

Topher Fangio Over a year ago

@BYK - I modified it to use $.tocssRule("body { color: white }"); and it worked except for the hover. I'm wondering if a combination of this and livequery might work...

|

jthompson · Accepted Answer · 2009-11-30 21:54:20Z

0

The reason this doesn't work is that $("#links td.active a:hover") matches elements with the psuedo-class "hover", which at that time will be none. You'll need to add an event to do this, like Lior's answer.

$("#links td.active a").hover();

answered Nov 30, 2009 at 21:54

jthompson

7,2862 gold badges36 silver badges33 bronze badges

Comments

Topher Fangio · Accepted Answer · 2009-12-01 02:10:34Z

Well, I finally figured out how to make it work like I wanted. Here is the basic code:

function updatePageCSS(input, color) {
  $('style.new_css_styles').remove();

  var new_css_styles = "<style class='new_css_styles'>";

  $('input.colorPicker').each(function() {
    var id = $(this).attr('id');
    var selector = $('#' + id + '_selector').val();
    var attribute = $('#' + id + '_attribute').val();
    var new_color = color;

    if ($(this).attr('id') != $(input).attr('id')) {
      new_color = $(this).val();
    }

    new_css_string += selector + ' { ' + attribute + ': ' + new_color + ' }\n';
  });

  new_css_styles += "</style>";

  $('head').append(new_css_styles);
}

Note that the selector and attribute are the values of hidden inputs. While I don't really like this approach very greatly, it seems to get the job done.

danielkza · Accepted Answer · 2009-11-30 22:05:06Z

-1

You may put the CSS in a different class, and add it to the elements when you wish.

#links td.active a:hover { color: #yourdefaultcolor; }
#links td.active a.preview:hover { color: #ff0000; }

Use something like this in JavaScript:

$('#links td.active a').hover(
  function(){ $(this).toggleClass("preview", true);  },
  function(){ $(this).toggleClass("preview", false); }
);

It works better if you have more than a single attribute that needs changing.

answered Nov 30, 2009 at 22:05

danielkza

2,9691 gold badge24 silver badges20 bronze badges

Collectives™ on Stack Overflow

jQuery - Modifying an element's hover css

5 Answers 5

Comments

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related