下拉菜單打開時懸停狀態不會保持不變嗎？

Question

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

使用與jQuery混合的老式DOM屬性。喜歡一個壞蛋！