龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

如何通过鼠标指向图片来隐现文字-(0)

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
一个table或者DIV放置一张图片(有链接)和位于图片下方的一段文本,希望使得鼠标移到图片上时显示文本片也显示),鼠标移出时隐藏文本。 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/

  一个table或者<DIV>放置一张图片(有链接)和位于图片下方的一段文本,希望使得鼠标移到图片上时显示文本片也显示),鼠标移出时隐藏文本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title></title>
 <style type="text/css">
 <!--
 body{
  font-size: 12px;
 }
 img{
  border: 0;
 }
 div a:hover{
  background: #FFFFFF;
  text-decoration: none;
  color: #666666;
 }
 div a p{
  display: none;
 }
 div a:hover p{
  display: block;
  width: 60px;
  text-align: center;
  margin: 5px 0;
 }
 -->
 </style>
</head>
<body>
<div><a href=http://www.webjx.com/htmldata/2006-06-13/"#"><img src="http://www.webjx.com/img/200406301.jpg" alt="网页教学网" width="60" height="46" /><p>网页教学网</p></a></div>
</body>
</html>



精彩图集

赞助商链接