下拉菜单打开时悬停状态不保持固定？答案

【问题标题】：hover state not remain fixed when a drop down menu opens?下拉菜单打开时悬停状态不保持固定？
【发布时间】：2013-11-25 00:21:36
【问题描述】：

我正在创建一个菜单栏，当我将鼠标悬停在元素颜色变为橙色时，当我将鼠标悬停在菜单栏的第一个和第二个元素上时，将打开一个下拉 div (menuForHeader)。我想要滚动在这个 div 上，菜单栏的第一个元素的颜色保持橙色。

jquery used
     <script>

    $(document).ready(function(){


     var lastScrollTop = 0
    var currentScrollTop = 0
    $(window).scroll(function (event) { 
        lastScrollTop = currentScrollTop
        currentScrollTop = $(document).scrollTop()
        if (currentScrollTop > lastScrollTop) 
            {
                     $('.menuWrap1').css("background-color","black");

            }
        else
            {
            if(currentScrollTop==0){
                        $('.menuWrap1').css("background","linear-gradient(black, transparent)");
             $('.menuWrap1').css("background","-o-linear-gradient(black, transparent)");
              $('.menuWrap1').css("background","-moz-linear-gradient(black, transparent)");}
    }
    });

      $('#menu2 li:nth-child(2)').mouseover(function(){
         $('.menuWrap1').css("height","163px");



      });
      $('.menuForHeader').mouseover(function(){
           $('.menuWrap1').css("height","163px");


      });
       $('.menuForHeader').mouseout(function(){
           $('.menuWrap1').css("height","60px");

      });

       $('menuForHeader').mouseover(function(){

           $('#menu2 li:nth-child(2) a').css("color","orange");
       });
         $('#menu2 li:nth-child(2)').mouseout(function(){
         $('.menuWrap1').css("height","60px");


      });

     // $('#menu2 li:nth-child(2)').addClass('onHovermenu');

    });

        </script>
         <script type="text/javascript">

    var showStaticMenuBar = false;


    $(window).scroll(function () {


        if (showStaticMenuBar == false) {
            //if I scroll more than 200px, I show it 
            if ($(window).scrollTop() >= 160) {
                //showing the static menu
                $('.menu').addClass('show');

                showStaticMenuBar = true;

            }

        }

        else {
            if ($(window).scrollTop() < 200) {
                $('.menu').removeClass('show');


                showStaticMenuBar = false;
            }

    }

    });
    </script>



Html code 
<div class="menuWrap1">

                    <?php  echo $this->element('Menus/menuHeader');?>
                       <div class="menuForHeader">

                          <?php echo $this->element('Menus/headerServices');?>
                      </div>
  </div>    

Css Used

.menuWrap1 {
    position:fixed;
   right:-21px;
   /*margin-left:372px;*/
    line-height: 35px;
    font-family: 'Oxygen', sans-serif;
    letter-spacing: 2px;
    height: 60px;
    margin-top: -135px;

    background: -webkit-linear-gradient(black, transparent);
     background: linear-gradient(black, transparent);
     background:-o-linear-gradient(black, transparent);
     background:-moz-linear-gradient(black, transparent);
     transition: height 0.5s ease-in-out;
     overflow:hidden;


}
#menu2{
    float: right;
    margin-right: 200px;
    margin-top:-19px;
}
#menu2 li{
    display:inline-block;
    width:auto;
    height:60px;
    margin-top:-37px;
    padding-right:20px;
}

#menu2 li.menu7{
    padding:0;
}
#menu2 li a{
  color:white;text-decoration: none;
}
#menu2 li a:active{
    color:orange;

}

#menu2 li:nth-child(2) a:hover{
     color:orange;
}

【问题讨论】：

标签： javascript html css

【解决方案1】：

哇，这太强悍了。让我们试一试：

var innerHeader = $('.menuForHeader');
var menuWrap1 = $('.menuWrap1');
menuWrap1.mouseover(function() {
    this.css('color', 'orange');
});
innerHeader.mouseover(function() {
    this.css('color', 'orange');
});
innerHeader.mouseout(function() {
    this.css('color', 'green');
});
menuWrap1.mouseout(function() {
    if (innerHeader.style.color === 'green') {
        this.css('color', 'green');
    }
});

使用混合了 jQuery 的老式 DOM 属性。像一个BAWSS！

【讨论】：