gpt4 book ai didi

javascript - onMouseOver 文本替换整个页面

转载 作者:行者123 更新时间:2023-11-28 11:49:08 27 4
gpt4 key购买 nike

我有一个我正在尝试制作的菜单,当您将鼠标悬停在链接上时,会出现一个较小的菜单。我在 a 标签上使用 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>

提前致谢

最佳答案

document.write 写入文档。不附加任何内容,随心所欲。

但是,这个问题可以只使用 css 来解决。

您的 html 将如下所示:

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

还有你的 CSS

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

因此,当您将鼠标悬停在链接上时,子 smallmenu 将变得可见。您必须稍微改进此示例,但您明白了。

关于javascript - onMouseOver 文本替换整个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20376319/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com