鼠标移动实现html页面的显示已经隐藏效果，具体实现参考本文，希望对大家有帮助。
简单的html页面，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.shmsg{width:100px;height:100px;display:none;position:absolute;left:0;top:15px;z-inde:5;}
</style>
</head>
<body>
<div onmouseover="messageOver(this)" onmouseout="messageOut(this)" style="width:100px;position:relative;">欢迎关注本网站
<div class="shmsg"><p><a href="#">ssss</a></p><p><a href="www.yoodb.com">www.yoodb.com</a></p></div>
</div>
</body>
</html>js实现方法，代码如下：
<script>
function messageOver(obj) {
var msg = obj.getElementsByTagName("div")[0];
msg.style.display = "block";
msg.style.backgroundColor = "#f60";
}
function messageOut(obj) {
var msg = msg.getElementsByTagName("div")[0];
msg.style.display = "none";
}
</script>最简单的书写方式，通过jquery实现隐藏及显示，具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.shmsg{width:100px;height:100px;display:none;position:absolute;left:0;top:15px;z-inde:5;}
</style>
</head>
<body>
<div onmouseover="$('.shmsg').show()" onmouseout="$('.shmsg').hide()" style="width:100px;position:relative;">欢迎关注本网站
<div class="shmsg"><p><a href="#">ssss</a></p><p><a href="www.yoodb.com">www.yoodb.com</a></p></div>
</div>
</body>
</html>
