使用 jquery 更改 CSS 悬停属性不起作用

Question

我知道我遗漏了一些明显的东西，并且我从这篇文章中得到了一些诱人的提示：

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

但我对 jquery 还太陌生，看不出我做错了什么。这么快的背景：

开始并调整了这个示例下拉菜单：http://www.w3csolutions.com/website-resources/Horizontal-Menu/jQuery-Menu/smoth-jQuery-menu/

部分调整是这样的：

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

效果很好，我得到粉红色的默认颜色，当我将鼠标悬停在任何下拉元素上时，它们会变为稍微不同的粉红色阴影。

现在我想创建一个函数来事后更改配色方案：

JS/JQuery 函数 setMenuDropdownTabColor(defaultColor, hoverColor){

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

当我运行此函数时，默认状态会按预期更改为我传入的内容，但悬停变为与默认状态相同。如果我注释掉默认状态，悬停将被忽略，并正常使用其旧的粉红色值。如果我注释掉悬停状态，那么新的默认状态仍然会覆盖悬停属性。检查器视图很好地显示了覆盖颜色，但悬停颜色没有显示在任何地方，无论是否被覆盖（当我将鼠标悬停在选项卡上时，它确实显示正在计算 ui-state-hover 标签）

我提到的第一篇文章提出了一些建议

a) 在 css 上设置一个 !important。我在css中试过了，但没有效果

b) 覆盖 .hover 自身。我试过了：

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

还有一些排列，但它们完全覆盖了整个类的样式，而不仅仅是悬停。我猜原因是这只是css中的一个.hover，但我实际上覆盖了一个jquery库字段？

帖子说的是有道理的，事情正在内联，但我不明白为什么默认状态覆盖在这种情况下有效，或者为什么我在检查器的任何地方都看不到悬停的颜色

是的，我已经尝试关闭浏览器然后再打开。

有什么想法或建议吗？

Answer 1

不要使用 jQuery 来执行简单的任务，例如在悬停时更改 CSS 属性，而是使用 CSS？

.le_menu_fgcolor:hover{
  background:#ffff00;
}

你可以像这样使用 jQuery：

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

第二个function 是当您移开鼠标时发生的情况。

按照我认为你在 cmets 中的意思，你想要这样的东西：

$(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");
  })