页面内容自动隐藏 css+javascript

最新推荐文章于 2025-08-15 09:01:53 发布

忠义白马庙

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量595

点赞数

文章标签： javascript css function url

本文通过一个简单的示例展示了如何使用JavaScript操作CSS样式来实现鼠标悬停效果。当鼠标移动到指定元素上时，会显示带有特定样式的文本；当鼠标离开时，文本将隐藏。此示例可用于学习网页中样式动态变化的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<style type="text/css">

</style>
<script language="javascript">
function show()
{
document.getElementById("mydiv1").style.visibility="visible";

}
function hidden()
{
document.getElementById("mydiv1").style.visibility="hidden";
}
</script>
</head>
<body>
<p onmousemove="show()" onmouseleave="hidden()">看我</p>
<div id="mydiv" style="background-image:url(aa.gif)">
<h1 id="mydiv1" style="visibility:hidden"><b>
border-color:<b> green; border-width: 3px</b><br>
border-color:<b> green; border-width: 3px</b><br>
border-color:<b> green; border-width: 3px</b><br>
border-color:<b> green; border-width: 3px</b><br>
border-color:<b> green; border-width: 3px</b><br>
border-color:<b> green; border-width: 3px</b><br>
border-color:<b> green; border-width: 3px</b><br>
border-color:<b> green; border-width: 3px</b><br>
border-color:<b> green; border-width: 3px</b><br>
border-color:<b> green; border-width: 3px</b><br></b></h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>