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?

Answer 1

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

});

Answer 2

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