Changing CSS hover property using jquery not working

Question

I know I am missing something obvious, and I am getting some tantalizing hints from this post:

CSS hover selector for background-color not working after dynamic change of background-color with jquery

but I am still too new to jquery to see just what I'm doing wrong. So quick background:

Started off of and tweaked this sample dropdown menu: http://www.w3csolutions.com/website-resources/Horizontal-Menu/jQuery-Menu/smoth-jQuery-menu/

Part of the tweak is this:

HTML File
        <ul  class="le_menu_bgcolor le_menu_topUl">
                <li class=" le_menu_shape_left le_menu_fgcolor">
                    <p>Left</p>
                    <p class="le_menu_aHover"> 
                        <A href="#tabs1">Left Tab</A>
                    </p>
                </li>
                <li class="le_menu_shape le_menu_fgcolor">
                    <p>Center</p>
                    <p class="le_menu_aHover">
                        <A href="#tabs2">Center Tab</A>
                    </p>
                </li>                
                <li class=" le_menu_shape_right le_menu_fgcolor">
                    <p>Right</p>
                    <p class="le_menu_aHover">
                        <A href="#tabs3">Right Tab</A>
                    </p>
                </li>                
            </ul>

CSS File
 .le_menu_fgcolor.ui-state-default {   
     background:#e40e7d;        
 }

 .le_menu_fgcolor.ui-state-hover {
     background:#ff0e7d;
 }

That works fine, I get the pink default color, and when I hover over any of the dropdown elements they change to a slightly different shade of pink.

Now I want to make a function to change the color scheme after-the-fact:

JS / JQuery function setMenuDropdownTabColor(defaultColor, hoverColor){

    $('.le_menu_fgcolor.ui-state-default').css('background', defaultColor);
    $('.le_menu_fgcolor.ui-state-hover').css('background', hoverColor);

When I run this function the default state changes as expected to what I pass in but the hover becomes the same as the default state. If I comment out the default state the hover gets ignored and just uses its old pink value as normal. If I comment out the hover state instead then the new default state still overrides the hover property. The inspector view shows the override color fine, but the hover one doesn't show up anywhere, overridden or not (while I'm hovering over the tab so that it does show that the ui-state-hover tag is getting calculated)

The first post I mentioned suggested a few things

a) setting a !important on the css. I've tried that in the css but it had no effect

b) over-riding the .hover its self. I've tried:

$('.le_menu_fgcolor').css('background', '#FFFF00').hover;

and a few more permutations but they completely override the whole style of the class, not just the hover. I'm guessing the reason is that this is for just a .hover in css, but I'm actually over-riding a jquery library field?

What the post said makes sense, that things are getting inlined, but I don't get why the default state over-ride is working if that's the case, or why I can't see the hover's color anywhere in the inspector

And yes, I have tried turning the browser off and then on again.

Any thoughts or suggestions?

I do in what I initially set it to, but CSS doesn't take variables for the values (at least not easily, and other posts on here have been suggesting its a no-no to try). So I'm setting up the default theme in CSS then trying to use JS/JQuery to switch between other themes — Daniel Cazan
– Daniel Cazan, Commented Apr 8, 2014 at 8:49
(also, the pretty formatting that I'm trying to use - from the link at the top of the message - uses jquery to tweak how it is doing the dropdowns. However it is implementing the functionality seems to use the jquery inner values for ui-states, and those seem to over-ride css in the order they get triggered) — Daniel Cazan
– Daniel Cazan, Commented Apr 8, 2014 at 8:52
Totally appreciated and glad you did before I called it a night, otherwise I'd wake up in the morning, run to the christmas tree, and see five versions of that question ;) — Daniel Cazan
– Daniel Cazan, Commented Apr 8, 2014 at 8:53

Albzi · Accepted Answer · 2014-04-08 09:08:48Z

3

Instead of using jQuery to do a simple task like change CSS properties on hover, use CSS?

.le_menu_fgcolor:hover{
  background:#ffff00;
}

You can use jQuery like this though:

$( ".le_menu_fgcolor" ).hover(
  function() {
    $( this ).css('background', '#FFFF00');
  }, function() {
    $( this ).css('background', '#FF0000');
  }
);

The second function is what happens when you remove the mouse.

By what I think you mean in the comments, you want something like this:

$(document).ready(function(){

  //The styles you want to overwrite the CSS with
  $('.le_menu_fgcolor').css(
    {
      "background": "#ff0000",
      "color": "#000000",
      "height": "50px"
    }
  );

  //Hover styles

  $( ".le_menu_fgcolor" ).hover(
    function() {
      $( this ).css('background', '#FFFF00');
    }, function() {
      $( this ).css('background', '#FF0000');
    }
  );

});

edited Apr 8, 2014 at 9:08

answered Apr 8, 2014 at 8:50

Albzi

15.6k6 gold badges49 silver badges67 bronze badges

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

6 Comments

Daniel Cazan Over a year ago

Just tried that, and it does seem to edit it without breaking the other script (rocking!), though it doesn't seem to take effect until the mouse hovers for the first time? The over-ride is getting shot off during the page initialization, but the page is coming in with the css default colors?

Albzi Over a year ago

Little confused, sorry! Do you mean you want the unhovered styles to be there on page load originally? But the CSS is overwriting? @DanielCazan

Daniel Cazan Over a year ago

So what ideally I would like is, whenever the function is triggered, all the color styles on the page (including the hovering) to change to the new style. At the moment the function is triggered during the .ready, so right after the css and everything got initialized. At the moment everything is coming in pink though, until I hover over the things and your code kicks in and changes things to red and yellow as expected

Daniel Cazan Over a year ago

Although it does seem to work if I also through in that jquery line to overwrite the default value to the same thing as coming out of hovering... So put together it does work :) I don't know if it is efficient but it works, yay! (still curious why the jquery overwrite doesn't, but working code is working code)

Daniel Cazan Over a year ago

Perfect, that totally works! Thanks again! I'll come back to figuring out why the jquery version didn't work as I get more experience with all that and maybe update things here a bit then, but yay for getting unstuck, much appreciated!

|

Rahi · Accepted Answer · 2014-04-08 08:50:21Z

1

 $(".le_menu_fgcolor").hover(function(){
    $(this).css("background-color","#ff0e7d");
  })

answered Apr 8, 2014 at 8:50

Rahi

3241 silver badge11 bronze badges

1 Comment

Daniel Cazan Over a year ago

Thanks Rahi! Runs into the same issue as BeatAlex's (doesn't override the initial css right away), but is working just as well without breaking the other scripts :)

Collectives™ on Stack Overflow

Changing CSS hover property using jquery not working

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related