Question

我有一个我想要制作的菜单，当您将鼠标悬停在链接上时会出现一个较小的菜单。我在on标签上使用onmouseover来显示我在CSS中设置的smallmenu标签。

问题是当我将鼠标悬停在链接上时，整个页面将被小菜单替换。这是我的代码。

    <html>
    <head>
        <title>JS3</title>
        <style>
            body {
                font-family: "Trebuchet MS";
            }
            menu {
                font-size: 18px;
                background-color: #E0E0E0;
                border-radius: 5px;
                width: 400px;
                text-align: center;
            }
            a:link, a:visited {
                display: inline-block;
                background-color: #E0E0E0;
                padding: 5px;
                width: 80px;
                text-decoration: none;
            }
            a:hover {
                display: inline-block;
                background-color: #CCCCCC;
                padding: 5px;
                width: 80px;
            }
            smallmenu {
                font-size: 12px;
                border-radius: 5px;
                width: 150px;
                background-color: #FFFFFF;
            }
        </style>
    </head>
    <body>
        <center>
            <menu>
                <a href="#" onmouseover="document.write('<smallmenu>test</smallmenu>');">| Home |</a> <a href="#">| Link 1 |</a> <a href="#">| Link 2 |</a>
                <smallmenu style="visibility: hidden">test</smallmenu>
            </menu>
        </center>
    </body>
</html>

提前致谢

Answer 1

document.write写入文档。不附加任何东西，你想要什么。

但是，这个问题只能用css来解决。

你的html看起来像这样：

<a href="#">Link
     <smallmenu>test</smallmenu>
</a>

你的CSS

a > smallmenu {
    display: none;
}
a:hover > smallmenu {
    display: block;
}

因此，当您将鼠标悬停在链接上时，子smallmenu将变为可见。你必须改进一下这个例子，但是你明白了。

Answer 2

在页面加载后使用document.write将刷新HTML缓冲区并替换文档内容。

这里有一个解释清楚的解决方案：Javascript document write overwriting page?

Answer 3

为什么不将smallmenu标记的可见性设置为可见而不是写入文档。

onMouseOver文本替换整个页面

3 个答案: