链接内容可以点击的文字提示

答案：<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>链接可以点击的文字提示</title>
 <style type="text/css">
 <!--
body { background:#F4F8FF; margin: 0px; font: 12px/130% arial,宋体,verdana,sans-serif;color: #000; padding: 0px;  }
li{ list-style:none; }
*{ margin: 0; padding: 0; }
.fenlei{height:50px; width: 300px; padding: 5px; line-height: 30px;margin-top: 20px;}
.fenleiul { float:left;}
.fenleiul li{ width: 101px;float: left;height: 30px; padding-left:12px;}
.fenleiul li a{ display:block; width: 101px; background: url() 1px 11px no-repeat; line-height: 30px; float: left;  padding-left:12px; color: #069; text-decoration:none; }
.fenleiul li a:visited{ background: url() 1px 11px no-repeat; color: #069;}
.fenleiul li a:hover{ background: url() 1px 11px no-repeat;color: #FF4500;}
.postitle{filter:alpha(opacity=80);-moz-opacity:0.8;opacity: 0.8;
background: url() 0 -10px no-repeat; margin-top: -12px;  float:left;margin-left:70px;*margin-left:-40px; position:absolute;}
.type{line-height: 16px; float: left; clear: both; background: #D9F6FF; width:120px; margin-left:21px;padding:3px; overflow: hidden;  border: solid 1px #9EB6D8; border-left:none;}
.fenlei .type a{ clear:both;background-image:none; padding-left:0;line-height: 16px;}
.type a:link{color:#004A75;}
.type a:visited{ color:#333;}
.fenlei .type a:hover{ color:#DC143C;background-image:none;}
.flnone{ display:none; }
 -->
 </style>
</head>
<body>
<div class="fenlei" >
<ul class="fenleiul" id="listyle">
<li><a href="/soft/1900.html" >暗黑之门</a><div class="flnone"><span class="type">最新客户端:<a href="#">劲乐团圣诞童话</a><br /><a href="#">劲乐团圣诞童话</a></span></div></li>
<li><a href="/soft/1900.html">宝贝坦克x</a><div class="flnone"><span class="type">最新客户端:<a href="#">劲乐团圣诞童话1</a></span></div></li>
<li><a href="/soft/1900.html">超级武林大富</a><div class="flnone"><span class="type">最新客户端:<a href="#">劲乐团圣诞童话1</a></span></div></li>
<li><a href="/soft/1900.html">魔力宝贝Ⅱ</a><div class="flnone"><span class="type">最新客户端:<a href="#">劲乐团圣诞童话1</a></span></div></li>
<li><a href="/soft/1900.html">神泣(Shaiya)</a><div class="flnone"><span class="type">最新客户端:<a href="#">劲乐团圣诞童话1</a></span></div></li>
<li><a href="/soft/1900.html">奇迹世界(SUN)</a><div class="flnone"><span class="type">最新客户端:<a href="#">劲乐团圣诞童话1</a></span></div></li>
</ul>
</div>
<script type="text/javascript">
   var listyle = document.getElementById("listyle")
 var lis = listyle.getElementsByTagName("li");
 var divs = listyle.getElementsByTagName("div");
 for (var tn = 0; tn < lis.length; tn++)
 {
     lis[tn].tn = tn;
   lis[tn].onmouseover = show;
   lis[tn].onmouseout = unshow;
 }
   function unshow()
 {
   for (var i = 0; i < divs.length; i++)
   {
      divs[i].className = "flnone";
   }
 }
 function show(tn)
 {
   unshow();
     divs[this.tn].className = "postitle";
 }
</script>
</body>
</html>
上一个：JS一行多列文字循环滚动带停顿
下一个：精选几种CSS滤镜文字阴影效果
更多图片编程知识: