메뉴에서 상위 태그 가져 오기

Question

드롭 다운 메뉴가 있는데 문제는 메인 메뉴에서 마우스를 놓을 때 드롭 다운 메뉴가 될 때 상위 요소의 호버 효과가 사라진다는 것입니다.

나는이 같은 일을 시도했다 : 그러나

$("nav#main-nav ul li #submenu").hover(
    function() { 
    //alert($(this).closest(["li", "a"])); 
    $(this).closest(["li", "a"]).css('border-bottom', '8px solid #000'); 
    } 
); 

는,이 작동하지 않습니다 :( 를 메뉴는 다음과 같습니다

<nav id="main-nav"> 
    <ul> 
    <li> 
     <span><a href="#" class="blue">Social & Sundhed</a></span> 
    </li> 
    <li> 
     <span><a href="#" class="orange">Pædagogisk</a></span> 
    </li> 
    <li> 
     <span><a href="#" class="green">Kost & Service</a></span> 
    </li> 
    <li> 
     <span><a href="#" class="yellow">Teknik-Service</a></span> 
     <ul id="submenu"> 
     <div class="inner"> 
      <div class="border-top"></div> 
      <div class="submenu-left"> 
      <li><a href="#">Beredsskabspersonale i basis og mesterstillinger</a></li> 
      <li><a href="#">Regionsbetjente Skolebetjente, Ejensomsserviceassister m.fl (DR)</a></li> 
      <li><a href="#">Driftsledere HUR/Arriva (Danske regioner)</a></li> 
      <li><a href="#">Miljøkontrollører ved Miljokontrollen (KBH)</a></li> 
      </div> 
      <div class="submenu-right"> 
      <li><a href="#">Beredsskabspersonale i basis og mesterstillinger</a></li> 
      <li><a href="#">Regionsbetjente Skolebetjente, Ejensomsserviceassister m.fl (DR)</a></li> 
      <li><a href="#">Driftsledere HUR/Arriva (Danske regioner)</a></li> 
      <li><a href="#">Miljøkontrollører ved Miljokontrollen (KBH)</a></li> 
      </div> 
      <div class="clearfix"></div> 
      <div class="border-bottom"></div> 
     </div> 
     <div class="clearfix"></div> 
     </ul> 
     <div class="clearfix"></div> 
    </li> 
    </ul> 
</nav> 

Answer 1

당신이에 가져가있어 수행 LI A:hover 또는 LI:hover a cus 두 번째를 사용할 때 원하는 하위 메뉴를 가리킬 수 있지만 A의 :hover은 활성 상태로 유지됩니다.이 작업은 CSS로 수행 할 수 있습니다.

#main-nav li:hover a 
{ 
    // Hover of the A 
} 

Answer 2

아마도 jQuery.parent을 사용해 보십니까?

$("nav#main-nav ul li #submenu").hover(
    function() { 
     $(this).parent().css('border-bottom', '8px solid #000'); 
    } 
);