文章/答案/技术大牛

发布

社区首页 >问答首页 >onMouseOver文本替换整个页面

问onMouseOver文本替换整个页面
EN

Stack Overflow用户

提问于 2013-12-04 13:12:11

回答 3查看 59关注 0票数 0

我有一个菜单，我想做，当你悬停在一个链接，一个较小的菜单出现。我在a标签上使用onmouseover来显示我在CSS中样式的小菜单标签。

问题是，当我悬停在链接上时，整个页面就会被小菜单所取代。这是我的密码。

    <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>

提前感谢

css

javascript

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-12-04 13:17:34

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

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

您的html将如下所示：

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

和你的CSS

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

因此，当您悬停在您的链接，子smallmenu将变得可见。你必须对这个例子做一点改进，但你明白了。

票数 0

Stack Overflow用户

发布于 2013-12-04 13:18:31

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

这里有一个很好的解决方案：Javascript document write overwriting page?

票数 0

Stack Overflow用户

发布于 2013-12-04 13:36:41

为什么不直接将小菜单标签的可见性设置为可见，而不是写入文档。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20376319

复制

相似问题

问onMouseOver文本替换整个页面
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问onMouseOver文本替换整个页面EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问onMouseOver文本替换整个页面
EN