css - asp.net CSS 同时突出显示菜单和面板。

Question

我有一个菜单和一个 hovermenuextender。当我将鼠标悬停在 menu1 上时，面板会下降，但是当我将光标移动到面板时，菜单中的突出显示会消失。所以我的目标是让面板突出显示菜单。该视频准确地展示了我的意思: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>                      
  

• 悬停菜单扩展器

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

• CSS

  .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;  
  }
  

我一直在努力

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

我注意到还有其他人也有类似的问题，但他们都没有为我工作。我真的希望你能理解我的问题和我的代码。

Answer 1

Venu Gopal 解决方案的答案。

我有 2 种不同的方法“有些有效”，差不多吧。

• 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 中，将鼠标悬停在面板上时，菜单链接未突出显示。

• 2

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

来自示例 1。现在任何建议都会对我有所帮助。