鼠标移动到文字时弹出div

例如：
企业名称一
企业名称二
企业名称三
企业名称四
这样的一个列表，当鼠标移动到企业名称的时候显示其详细信息

追问：道理我懂 可是对js不熟悉写不出来！都找过了，都是不太相符 想自己改改吧 又对js不熟悉！！

答案：<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
	#main{ width:600px;}
	span{ width:178px; float:left; border:1px solid red; text-align:center; height:30px;
		  padding-top:15px; margin-left:10px;}
	.p1{ display:none; width:600px; clear:both;}
	.p2{ display:block; width:600px; background-color:#CCCCCC; clear:both;}
</style>
</head>

<body>
	<div id="main">
		<span id="group_1">企业名称1</span>
		<span id="group_2">企业名称2</span>
		<span id="group_3">企业名称3</span>
		<p id="content_1" class="p1">这是企业1内容</p>
		<p id="content_2" class="p1">这是企业这是企业2内容</p>
		<p id="content_3" class="p1">这是企业这是企业这是企业3内容</p>
	</div>
	<script type="text/javascript">
	var group_1=document.getElementById("group_1");
	var group_2=document.getElementById("group_2");
	var group_3=document.getElementById("group_3");
	var content_1=document.getElementById("content_1");
	var content_2=document.getElementById("content_2");
	var content_3=document.getElementById("content_3");
	group_1.onmouseover=function(){
		content_1.className="p2"
	}
	group_2.onmouseover=function(){
		content_2.className="p2"
	}
	group_3.onmouseover=function(){
		content_3.className="p2"
	}
	group_1.onmouseout=function(){
		content_1.className="p1"
	}
	group_2.onmouseout=function(){
		content_2.className="p1"
	}
	group_3.onmouseout=function(){
		content_3.className="p1"
	}
	</script>
</body>
</html>

其他：onmouseover里写层显示就行了啊，onmouseout层隐藏 百度搜索：JS 下拉菜单
或者 jquery   下拉菜单
有很多很好的效果，肯定能让你满意！

上一个：如何在dreamweaver cs3 中插入div标签
下一个：父div 填充10 子div 的边距是10,子div隔父div边框是多少

更多图片编程知识: