CSS DIV 怎么做出来鼠标移动上就显示其内容？
用css伪类hover可以实现这个功能。
1、新建html文档，在body标签中添加一个div标签，然后在div标签中添加p标签，为p标签添加内容：
2、为了方便演示，给div标签设置宽高和背景颜色，然后给p标签设置“display”属性，属性值为“none”，这样p标签中的文字默认情况下不会显示：
3、给div设置hover伪类，当鼠标移动到div区域时，设置p标签的样式为块级元素“block”：
4、这样当鼠标移动到div上时就会显示p标签内容，鼠标离开就不显示p标签内容：
<!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>
<script type="text/javascript" src="http://img.lanrentuku.com/img/js/jquery.js"></script>
<!--上面这个链接你可以加着，也可以用360浏览器下载下来，放到本地外链，这是函数库，JQuery可以去单独学习这个，这个兼容所有浏览器，和JS一样，只不过是比JS好用，同样的同东西-->
<!--下面是调用上面的函数库，再进一步的编程-->
<script>
$(function(){
var aa="这些一行文字就写到这里面";
alert(aa);
$("#testID").mouseover(function(){
$(this).text(aa);
}).mouseout(function(){
$(this).text("");
});
})
</script>
</head>
<body>
<!--这里面的样式你应该能看得懂吧，不用管这些，跟上面的Js没关系，只是加上style里面的东西看着会好看些，只是写了些背景字体大小和字体颜色的样式-->
<div style="width:400px; height:50px; margin:0 auto; background-color:#6C3; color:#FC6; font-size:20px; font-weight:bold; line-height:50px; text-align:center;" id="testID">
</div>
</body>
</html>
定义和用法
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
说明
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上，其他元素也可以处于悬停状态，不过 CSS 没有定义究竟是哪些元素。
激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接，它们会在支持 CSS 的浏览器中以不同的方式显示出来：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF} /* 被选择的链接 */
注释：为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！！
注释：为了产生预期的效果，在 CSS 定义中，a:active 必须位于 a:hover 之后！！
注释：Pseudo-class（伪类）的名称对大小写不敏感。
注释：伪类可与 CSS 类配合使用：
<html>
<head>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
</head>
<body>
<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>
</body>
</html>
from
这就要借助js代码了
<body>
<div id="warp" onmouseover="over()" onmouseout="out()">
<div id="text" style="display: none;">这里面有一段文字</div>
</div>
</body>
<script type="text/javascript">
function over(){
var div = document.getElementById('warp');//获取大div对象
var text = document.getElementById('text');//获取文字div对象
text.style.display="block";
}//鼠标进入显示文字
function out(){
var div = document.getElementById('warp');
var text = document.getElementById('text');
text.style.display="none";
}//鼠标退出不显示文字
</script>
<div class="wenzi">
<span>今天天气好晴朗</span>
</div>
在CSS里写 .wenzi span：hover｛color：#f00；｝
