页面内容自动隐藏 css+javascript

最新推荐文章于 2026-01-01 17:43:06 发布

转载最新推荐文章于 2026-01-01 17:43:06 发布 · 608 阅读

文章标签：

#javascript #css #function #url

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

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