弹出菜单层一

上网的时候经常看到鼠标移到某一对象上会弹出一个菜单层，显示该对象的详细内容或与之相关的内容。知道是用一个层（div）来实现的，就是没有亲自动手做过。

“看花容易绣花难”。动起手来才知道有那么多繁琐的细节让人头痛。

开始我的思路是：在鼠标移到一个对象上，显示层。层显示在最前面（z-index），层的位置是相对与触发事件（onmouserover）的对象,即层的位置是相对的(position:relative)。

按照这个思路去做，先用css控制层的样式。下面是div的css：

style="background: red; width: 100px; position: relative; display: none; z-index: 1000;"

写js代码：

Code

然后调用js：

<div>

        <table>

            <tr>

                <td>

                    <a href="#" onmouseover="show();" onmouseout="hidden();">弹出菜单...</a></td>

           </tr>

        </table>

        </div>

不过，最后层老是不能浮动。

在网上查阅了一些资料才发现div的css有问题，不应是相对位置(position:relative)，而应是绝对位置（position: absolute）。

下面是代码：

Code

批注：

offsetX：检查相对于触发事件的对象，鼠标位置的水平坐标

offsetY：检查相对于触发事件的对象，鼠标位置的垂直坐标

不能眼高手低，得多动手。

posted @ 2008-02-17 22:12  yellowwood  阅读(352)  评论(0)  编辑  收藏  举报
Never Give UP