2. CSS3 阴影的文字特效 CSS代码: <!DOCTYPE CSS><CSS lang="en"><head><meta charset="UTF-8"><title>
3. box-shadow 属性 CSS3box-shadow属性应用
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<script>标签中，输入js代码：
$('td').click(function () {
$('td').css('font-weight', 'normal')
$(this).css('font-weight', 'bold')
})
3、浏览器运行index.html页面，点击“我是A”，此时字体会变粗。
4、再点击“我是B”，此时“我是A”的字体粗度恢复正常，“我是B”的字体变粗。
我想你这个问题描述的不是太清晰吧，我猜想你是想说鼠标经过图片的时候在图片的底部显示描述性文字吧？
这个实现起来非常困难，你应该也了解，css可以通过伪类实现一些互动效果，但是所有这些互动效果都有一个很大的限制，通过伪类只能实现事件发生元素本身的特效，比如，我们通过纯css不可能实现你点击一个按钮而改变一个文本框的背景色；
不过这个问题你只需稍微使用一点js就可以轻松搞定的；
不过按照你的要求，使用纯css，我给出的两种实现方式；
第一种：
<html>
<style type="text/css">
div{
width: 200px
height: 200px
margin:50px
background: #888
}
a{
display: block
width: 200px
height: 200px
text-indent: -9999px
background-image: url("./1.jpg")
}
a:hover{
text-indent: 10px
white-space: nowrap
text-overflow: clip
overflow: hidden
vertical-align: bottom
line-height:370px
color: #111
text-decoration: none
}
</style>
<body>
<div>
<a href="#">
河南人网上晒幸福 称幸福是早喝胡辣汤
</a>
</div>
<body>
</html>
第二种：
<html>
<style type="text/css">
div{
width: 200px
height: 200px
margin: 50px
background: #888
position: relative
}
img{
width:200px
height: 200px
}
a{
display: block
position: absolute
width: 200px
height: 200px
top: 0
left: 0
text-indent: -9999px
}
a:hover{
color: orange
text-decoration: none
white-space: nowrap
text-indent:10px
overflow: hidden
line-height: 370px
}
</style>
<body>
<div>
<img src="./1.jpg" />
<a href="#">
河南人网上晒幸福 称幸福是早喝胡辣汤
</a>
</div>
<body>
</html>
不过这两种方法与js实现方式相比很不实用，而且弊端较多，例如文字只能显示一行，最后文字的切割痕迹无法消除，网页内容与表现无法截然分离，所以纯css的实现基本上不会在专业的网站上使用。
但愿以上回答能让你满意。
