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

时间:2014-04-08 08:44:45

标签: jquery css hover

我知道我错过了一些明显的东西,我从这篇文章中得到了一些诱人的提示:

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库字段?

帖子说的是有意义的,事情是内联的,但我不明白为什么默认的状态覆盖是有效的,如果是这样,或者为什么我在检查员的任何地方都看不到悬停的颜色

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

有任何想法或建议吗?

2 个答案:

答案 0 :(得分:3)

而不是使用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');
    }
  );

});

答案 1 :(得分:1)

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