下拉菜單打開時，懸停狀態不能保持固定？

Question

我正在創建一個菜單欄，當我將鼠標懸停在元素顏色上時更改為橙色，並且當我將鼠標懸停在菜單欄的第一個和第二個元素上時，將打開一個下拉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;
}

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

使用老式的DOM屬性與jQuery混合在一起。 像個BA子！