如何用CSS，将文字隐藏在图片之下，然后将鼠标移到图片上就会浮现出来，下面是图片显示的案例，在线等

html-css010

如何用CSS，将文字隐藏在图片之下，然后将鼠标移到图片上就会浮现出来，下面是图片显示的案例，在线等,第1张

<style>

.box {position:relative float:left width:240px height:160px margin:10px}

.box .img {width:100% height:100% background-color:#fdd}

.box .txt {display:none position:absolute top:160px width:320px height:200px background-color:#ddf z-index:2}

.box:hover .txt {display:block}

</style>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

<div class="box">

   <div class="img">这里放图片</div>

   <div class="txt">这里放文字</div>

</div>

你可以把它看成一个动画效果。有一个div，将它定位在右上角，并且内容不可溢出，在里面排版布局。然后只需要根据滚动条的位置，触发一个自定义函数。在函数类容中改变div的高度，多少时间减少、增加1px高度，高度为0或最大值是停止。因为框架问题，所以我只是说了怎样去做，亲，求采纳。

你好，需要系统的学习一下css的知识，不要急于求成就没问题。

这一段代码中：

<meta http-equiv="Content-Type" content="text/html charset=gb2313"/>

是对html文档的描述，也就是告诉浏览器这个页面用是gb2313字符集；

相当于我告诉浏览器我用的是汉字，你不要用英文或者法语给我显示这个页面。

在css文档里面写css的样式，然后在html文档中引用这些样式，一个美观的页面就浮现在你面前了。

而css中定义样式的很好的武器就是：class，它的中文意思是“类”。

比如我想要文档中某些文字都显示成“红色”（red），我可以定义这些文字的“类”，给他起个名字“red”，再给这个类一个值（这个才是发挥效果的关键部分），css代码就可以这样写：

.red{color:red}

在html里面引用的时候就通过给一个文字段落带上类为红色的帽子从而引用到这段css效果，

<p class="red">这里的文字就会变成红色的啦！</p>

<p> 这里的文字就不会变成红色的啦！</p>

___________________________________________

注：这里的class的名字即使你写成了rd，引用的时候只要你引用的名字也是rd，文字都会显示成红色，为什么呢？因为关键在于.red{color:red}这里，赋值是红色，不在于你起的什么名字。之所以起这样的名字原因在于看多了代码一眼就知道我这个类是要把什么东西变成红色。

全部的代码如下，你拷贝到一个记事本，用格式.html保存，用浏览器打开就可以看到效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot>

<html xmlns="http://www.w3.org/1999/xhtml&quot>

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312" />

<title>这个文章主要是想把一个段落的文字变成红色</title>

<style type="text/css">

.red{color:red}

</style>

</head>

<body>

<p class="red">这里的文字会变成红色的啦！</p>

<p>这里的文不字会变成红色的啦！</p>

</body>

</html>

———————————————————————————————————

效果如下截图：