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 function setMenuDropdownTabColor（defaultColor，hoverColor）{

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

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

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

a）在css上设置！important。我在css中尝试了这个但是没有效果

b）超越自我。我试过了：

$（'。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是移除鼠标时发生的情况。

通过我认为你在评论中的意思，你想要这样的东西：

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

使用jquery更改CSS hover属性不起作用

2 个答案: