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

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

score 1 · Accepted Answer

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。现在任何建议都会对我有所帮助。

score 0 · Accepted Answer

如果您在悬停菜单项时使用任何脚本打开下拉菜单，则以下解决方案可能会有所帮助

悬停时向菜单项添加类名

  $(".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;
 }

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

2 回答 2

Related

Reference