html - 菜单鼠标悬停动画 : having an highlight reflect displayed above the menu link

Question

由于 HTML 的限制，我遇到了一个似乎无法解决的问题。

下面的截图可以解释整个事情:

#

如您所见，我想要一个透明部分移动到鼠标悬停的菜单项上方。

但正如我所想，我发现这不会起作用，因为一旦透明部分到达鼠标下方，菜单项就会失去 :hover 状态。

如果使用 actionscript3，这可以通过在我的透明部分设置 .mouseEnabled 属性轻松完成，这样鼠标就不会考虑它。

您知道 html 是否可以实现类似的功能吗？您是否有其他解决方案/跟踪可遵循，以成功完成我想做的事情？

感谢您的帮助!

Answer 1

实现这种效果的关键是使用 CSS 属性 z-index。例如，如果您的菜单结构如下所示:

<div id="menu">
  <ul>
    <li>
      <a href="#">Master/PHD Education</a>
      <span>Introduction, Master &amp; Doctorans</span>
    </li>
  </ul>
  <div id="transparent_overlap"></div>
</div>

诀窍是使用 3 层，第一层是可以分配给 div 的菜单背景(棕色和白色)，然后第二层是透明重叠，最前面的是LI里面有链接。使用 css 它看起来像:

#menu{
   background:..
}

#transparent_overlap{
   background:..transparent effect..
}

li{
   position:relative;
   z-index:3;
}

现在只需要用javascript将透明重叠移动到当前悬停的选项即可。