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>

Hovermenuextender

 <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解决方案。

我有两种不同的方式，“一些什么工作”，差不多。

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

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

Answer 2

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

在菜单项悬停时为菜单项添加类名

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

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

2 个答案: