JS的鼠标点击效果

最新推荐文章于 2024-07-09 20:42:41 发布

Microblue

最新推荐文章于 2024-07-09 20:42:41 发布

阅读量2.2k

点赞数

文章标签： list button class 公告网游 function

本文链接：https://blog.csdn.net/yanjiaye520/article/details/4626596

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
.content_news_list { clear:both;height:200px;text-align:left; width:331px;padding:0;overflow:hidden;font-size:12px;}
.content_news_tab{background:none; height:36px; width: 331px; margin-left:13px; padding:0;}
.content_news_tab li{ display:block; float: left; padding-top:12px;font-size:12px; height:24px; width:66px; text-align: center; cursor:pointer;font-weight:bold; color:#dbd6c6;}
.content_news_tab li.hover {font-weight:bold; color:#1e140b;}
.content_news_list ul{display: none; }
.content_news_list ul.block { display: block; }
.content_news_list ul{width:320px;overflow:hidden;height:230px;position:relative;}
.content_news_list ul li {height:24px;line-height:24px;color:#999;display:block;clear:both;}
.content_news_list ul li .red1 {color:#ff0000;font-weight:bold;}
.content_news_list ul li .red2 {color:#ff0000;}
.content_news_list ul li a{color:#999;}
.content_news_list ul li a:hover{color:#d73812;}
.content_news_list ul li span{float:right;width:40px;}
.content_news_list ul div{height:24px;display:block;text-align:center;position:absolute;bottom:5px;left:130px;}
.content_news_list ul div input{width:60px;height:20px;border:none; cursor:pointer;}
</style>
<script type="text/javascript">
function setTab(m,n,obj){
obj.t=setTimeout(function(){
var tli=document.getElementById("tab"+m).getElementsByTagName("li");
var mli=document.getElementById("content_news_list"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
},500)
  obj.οnmοuseοut=function(){clearTimeout(this.t)}
}
</script>
</HEAD>
<BODY>
<ul class="content_news_tab" id="tab0">
                   <li onMouseover="setTab(0,0,this)" class="hover">新闻报道</li>
                   <li onMouseover="setTab(0,1,this)">国战动态</li>
                   <li onMouseover="setTab(0,2,this)">热点追踪</li>
                   <li onMouseover="setTab(0,3,this)">媒体动态</li>
          <li onMouseover="setTab(0,4,this)">活动专题</li>
                 </ul>
         <div class="content_news_list" id="content_news_list0">
             <ul class="block">
              <li><span>08/07</span><a href="/sol/news/2009-08/5409.shtml" >永恒的经典小侃光荣经典人设特点1</a></li>
              <li><span>07/17</span><a href="/sol/news/2009-07/5262.shtml" >浅谈: 三国志从单机到网游的阵型变革</a></li>
              <li><span>07/16</span><a href="/sol/news/2009-07/5259.shtml" >封测纪念明信片获奖名单揭晓陆续寄出</a></li>
              <li><span>07/09</span><a href="/sol/news/2009-07/5212.shtml" >7月8日封测结束公告</a></li>
              <li><span>07/09</span><a href="/sol/news/2009-07/5226.shtml" >三国志OL首测完满落幕玩家热盼内测</a></li>
              <li><span>07/08</span><a href="/sol/news/2009-07/5225.shtml" >7月8日蜀魏国战结果</a></li>
              <li><span>07/08</span><a href="/sol/news/2009-07/5210.shtml" >三国志OL火爆封测诸公会会长热推!</a></li>
              <li><span>07/07</span><a href="/sol/news/2009-07/5208.shtml" >7月7日魏吴国战结果</a></li>
              <div><input type="button" value=""/></div>
             </ul>
             <ul class="block">
              <li><span>08/07</span><a href="/sol/news/2009-08/5409.shtml" >永恒的经典小侃光荣经典人设特点2</a></li>
              <li><span>07/17</span><a href="/sol/news/2009-07/5262.shtml" >浅谈: 三国志从单机到网游的阵型变革</a></li>
              <li><span>07/16</span><a href="/sol/news/2009-07/5259.shtml" >封测纪念明信片获奖名单揭晓陆续寄出</a></li>
              <li><span>07/09</span><a href="/sol/news/2009-07/5212.shtml" >7月8日封测结束公告</a></li>
              <li><span>07/09</span><a href="/sol/news/2009-07/5226.shtml" >三国志OL首测完满落幕玩家热盼内测</a></li>
              <li><span>07/08</span><a href="/sol/news/2009-07/5225.shtml" >7月8日蜀魏国战结果</a></li>
              <li><span>07/08</span><a href="/sol/news/2009-07/5210.shtml" >三国志OL火爆封测诸公会会长热推!</a></li>
              <li><span>07/07</span><a href="/sol/news/2009-07/5208.shtml" >7月7日魏吴国战结果</a></li>
              <div><input type="button" value=""/></div>
             </ul>
             <ul class="block">
              <li><span>08/07</span><a href="/sol/news/2009-08/5409.shtml" >永恒的经典小侃光荣经典人设特点</a></li>
              <li><span>07/17</span><a href="/sol/news/2009-07/5262.shtml" >浅谈: 三国志从单机到网游的阵型变革</a></li>
              <li><span>07/16</span><a href="/sol/news/2009-07/5259.shtml" >封测纪念明信片获奖名单揭晓陆续寄出</a></li>
              <li><span>07/09</span><a href="/sol/news/2009-07/5212.shtml" >7月8日封测结束公告</a></li>
              <li><span>07/09</span><a href="/sol/news/2009-07/5226.shtml" >三国志OL首测完满落幕玩家热盼内测</a></li>
              <li><span>07/08</span><a href="/sol/news/2009-07/5225.shtml" >7月8日蜀魏国战结果</a></li>
              <li><span>07/08</span><a href="/sol/news/2009-07/5210.shtml" >三国志OL火爆封测诸公会会长热推!</a></li>
              <li><span>07/07</span><a href="/sol/news/2009-07/5208.shtml" >7月7日魏吴国战结果</a></li>
              <div><input type="button" value=""/></div>
             </ul>
             <ul class="block">
              <li><span>08/07</span><a href="/sol/news/2009-08/5409.shtml" >永恒的经典小侃光荣经典人设特点</a></li>
              <li><span>07/17</span><a href="/sol/news/2009-07/5262.shtml" >浅谈: 三国志从单机到网游的阵型变革</a></li>
              <li><span>07/16</span><a href="/sol/news/2009-07/5259.shtml" >封测纪念明信片获奖名单揭晓陆续寄出</a></li>
              <li><span>07/09</span><a href="/sol/news/2009-07/5212.shtml" >7月8日封测结束公告</a></li>
              <li><span>07/09</span><a href="/sol/news/2009-07/5226.shtml" >三国志OL首测完满落幕玩家热盼内测</a></li>
              <li><span>07/08</span><a href="/sol/news/2009-07/5225.shtml" >7月8日蜀魏国战结果</a></li>
              <li><span>07/08</span><a href="/sol/news/2009-07/5210.shtml" >三国志OL火爆封测诸公会会长热推!</a></li>
              <li><span>07/07</span><a href="/sol/news/2009-07/5208.shtml" >7月7日魏吴国战结果</a></li>
              <div><input type="button" value=""/></div>
             </ul>
             <ul class="block">
              <li><span>08/07</span><a href="/sol/news/2009-08/5409.shtml" >永恒的经典小侃光荣经典人设特点</a></li>
              <li><span>07/17</span><a href="/sol/news/2009-07/5262.shtml" >浅谈: 三国志从单机到网游的阵型变革</a></li>
              <li><span>07/16</span><a href="/sol/news/2009-07/5259.shtml" >封测纪念明信片获奖名单揭晓陆续寄出</a></li>
              <li><span>07/09</span><a href="/sol/news/2009-07/5212.shtml" >7月8日封测结束公告</a></li>
              <li><span>07/09</span><a href="/sol/news/2009-07/5226.shtml" >三国志OL首测完满落幕玩家热盼内测</a></li>
              <li><span>07/08</span><a href="/sol/news/2009-07/5225.shtml" >7月8日蜀魏国战结果</a></li>
              <li><span>07/08</span><a href="/sol/news/2009-07/5210.shtml" >三国志OL火爆封测诸公会会长热推!</a></li>
              <li><span>07/07</span><a href="/sol/news/2009-07/5208.shtml" >7月7日魏吴国战结果</a></li>
              <div><input type="button" value=""/></div>
             </ul>
           </div>
</BODY>
</HTML>

Microblue

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS的鼠标点击效果

New Document .content_news_list { clear:both;height:200px;text-align:left; width:331px;padding:0;overflow:hidden;font-size:12px;}.content_news_tab{background:none; height:36px; width: 33
复制链接

扫一扫