Question

我有一个HTML表定义如下：

  <table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td class="item1a">&nbsp;</td>
      <td class="item2a">&nbsp;</td>
      <td class="item3a">&nbsp;</td>
      <td class="item4a">&nbsp;</td>
      <td class="item5a">&nbsp;</td>
      <td class="item6a">&nbsp;</td>
      <td>Some addition content that is not a menu</td>
    </tr>
  </table>

每个单元格都有自己的项目，因为内容和宽度这样的内容会有所不同。例如，这里是与item1a

相关联的CSS

.item1a {height:36px; width:84px; background-image:url(/resources/images/item1a.png);}
.item1b {height:36px; width:84px; background-image:url(/resources/images/item1b.png);}

当有人在单元格上盘旋时，我需要将班级从a更改为b。我很自信我知道该怎么做。我真正的问题是，我不知道如何在项目下面弹出一个菜单。由于图形的特殊性，我需要使用这种表格结构。有人可以帮我吗？我该如何解决这个问题？

谢谢！

Answer 1

假设您的课程item1a, item2a...是拼写错误，您打算输入item1 a

$('td').hover(hoverIn, hoverOut); //make your more selector more specific 

function hoverIn() {
  $this = $(this);
  $this.removeClass('a').addClass('b');
  var hoverMenu = '<div class="hoverMenu">Rest of the HTML needed for the menu</div>';
  $this.append(hoverMenu);
}

function hoverOut() {
  $this = $(this);
  $this.removeClass('b').addClass('a');
  $this.children('.hoverMenu').remove();
}

在悬停时切换类并将DIV添加到TD底部。您可以移动它以满足您的需求。

使用JQuery构建一个非常具体的菜单

1 个答案: