asp.net CSS가 메뉴와 패널을 동시에 강조 표시합니다.

Question

나는 메뉴와 hovermenuextender가 있습니다. 메뉴 1 위로 마우스를 가져 가면 패널이 아래로 떨어지지만 커서를 패널로 이동하면 메뉴의 강조 표시가 사라집니다. 그래서 내 목표는 패널과 함께 메뉴를 강조 표시하는 것입니다. 이 동영상은 내가 무슨 뜻인지 정확히 보여줍니다 http://screencast.com/t/Bhfj6mtZkPZp

코드 :

• 메뉴

  <div id="Menu"> 
      <a href="Page1.aspx"> 
      <div class="menu-item" id="menu1" runat="server"> 
       <span class="menu-text">Page1</span> 
      </div> 
  </a> 
  

• 패널

  <asp:Panel CssClass="panel" ID="pnPanel" runat="server"> 
      <div id="panelarea">  
       <a href="Panelmenu1.aspx"> 
        <div class="panel-item"> 
         <span class="panel-text">Panel menu 1</span> 
        </div> 
       </a> 
  </div>      
  

• Hovermenuextender

  <asp:HoverMenuExtender ID="HoverMenuExtender" runat="server" PopupControlID="pnPanel" PopupPosition="Bottom" OffsetX="0" OffsetY="0" PopDelay="50" TargetControlID="menu1"></asp:HoverMenuExtender> 
  

• CSS 나는 비슷한 문제 나 다른 사람들이 눈치 챘을

  .menu-item > .panel-item:hover a 
      { 
      background-image: url('img/menu-item.png'); 
      } 
  
      .menu-item .panel-item:hover 
      { 
      background-image: url('img/menu-item.png'); 
      } 
  

  시도하고있다 무엇

  .menu-item 
  { 
      text-decoration: none; 
      width: 225px; 
      height: 55px; 
      float: left; 
  } 
  
  .menu-item:hover 
  { 
      background-image: url('img/menu-item.png'); 
  } 
  
  .panel-item 
  { 
      width: 225px; 
      height: 25px; 
      background-color: #626262; 
  } 
  
  .panel-item:hover 
  { 
      background-color: black; 
  } 
  

그들 중 누구도 나를 위해 일해 오지 않았다. 내 문제와 제 코드를 이해하시기 바랍니다.

Answer 1

메뉴 항목이 때 목록

$(".menu-item").hover(function(){ 
     $(this).addClass('menuHighlighted'); 
    }, 
    function(){ 
     $(this).removeClass('menuHighlighted'); 
    } 
); 

을 가리킬 때 다음과 같은 솔루션을

이 메뉴 항목에 클래스 이름을 추가 도움이 될 가리킬 때 드롭 다운을 열 수있는 스크립트를 사용하는 경우 항목이 강조

$(".list-item").hover(function(){ 
     $(this).addClass('listHighlighted'); 
     $(this).parents('.menu-item').addClass('menuHighlighted'); 
    }, 
    function(){ 
     $(this).removeClass('listHighlighted'); 
     $(this).parents('.menu-item').removeClass('menuHighlighted'); 
    }); 

CSS

.menuHighlighted{ 
    background-image: url('img/menu-item.png'); 
} 
.listHighlighted{ 
    background-color: black; 
} 

Answer 2

Venu Gopal 솔루션에 대한 답변.

저는 "어떤 것이 효과가 있습니다"라는 두 가지 다른 방식을 가지고 있습니다. 패널 가리키면 때 예 번호 1 메뉴 링크

<script type="text/javascript"> 
    $(window).load(function() { 
    $(".menu-item").hover(function() { 
    $(this).addClass('menuHighlighted'); 
    }, 
    function() { 
    $(this).removeClass('menuHighlighted'); 
    }); 

    $(".panel-item").hover(function() { 
    $(this).addClass('listHighlighted'); 
    $(this).parents('.menu-item').addClass('menuHighlighted'); 
}, 
    function() { 
    $(this).removeClass('listHighlighted'); 
    $(this).parents('.menu-item').removeClass('menuHighlighted'); 
}); 
}); 
</script> 

1

• 가 강조되지 않는다.내가 원하는 예에서

  <script type="text/javascript"> 
  $(window).load(function() { 
      $(".menu-item").hover(function() { 
      $(this).addClass('menuHighlighted'); 
  }); 
  
  $(".panel-item").hover(function() { 
      $(this).addClass('listHighlighted'); 
      $(this).parents('.menu-item').addClass('menuHighlighted'); 
  }, 
  function() { 
      $(this).removeClass('listHighlighted'); 
      $(this).parents('.menu-item').removeClass('menuHighlighted'); 
  }); 
  }); 
  

2

• 는이 모든 노력하지만 메뉴는 마우스가 메뉴를 통해 아니더라도 그래도 그 하이라이트를 유지합니다.

  function() { 
  $(this).removeClass('menuHighlighted'); 
  

  exmaple 1. 에서 어떤 제안이 지금 나에게 도움이 될 :

  이 두 가지의 차이는 내가 코드를 제거합니다.