如何让鼠标移动到这4个标题就显示其每个标题内容
<style type="text/css">
.news_r {background-color:#FFFFFF;border-bottom:1px double #D5D5D5;border-left:1px double #E6E6E6;border-right:1px double #D5D5D5;height:326px;
width:520px;float:left;}
#news_nav_bg {background:url(images/k_bg.gif) repeat-x scroll 0 0 transparent;height:23px;width:520px;}
.news_title {margin:0px;font-size:12px;}
.title1a{float:left;width:99px;padding-top:5px;height:19px;font-weight:bold;text-align:center;}
.title1b{float:left;width:99px;cursor:pointer;padding-top:5px;height:18px;text-align:center;} .neikuan {margin:5px;}
.toutiao h1 {font-size:16px;text-align:center;padding-top:7px;}
.toutiao p {color:#9D9D9D;height:20px;line-height:20px;text-indent:2em;}
.toutiao {border:1px double #DFDFDF;height:64px;width:484px;} .news_line_bg {border:1px solid #000;background:url(images/news_line_bg.gif) repeat-x scroll 50% bottom transparent;float:left;height:90px;width:484px;}
.news_zx_anniu{background:#eeeeee;float:left;width:20px;height:70px;text-align:center;}
.news_zx_liebiao {float:left;font-size:12px;margin:0px;padding:5px;}
.news_line_bg2{border:1px solid #000;width:484px;height:90px;} .qzzp_liebiao_l{width:245px;height:283px;float:left;margin-bottom:10px;}
.qzzp_liebiao_bg{background:url(../images/qzzp_liebiao_bg.gif) no-repeat;width:245px;height:23px;}
.qzzp_liebiao_biankuan{width:243px;height:260px;border-right:#dfdfdf 1px solid;border-left:#dfdfdf 1px solid;border-bottom:#dfdfdf 1px solid;}
.qzzp_liebiao_title{height:23px;line-height:23px;text-align:center;}.qzzp_liebiao_r{width:245px;height:283px;float:left;margin:0 0 10px 10px;}
</style><div class="news_r">
<div id="news_nav_bg">
<ul class="news_title">
<!--标题1-->
<li class="title1a" id="aa1"  onmouseover="document.getElementById('').style.display='inline';document.getElementById('').style.display='none';">热点关注</li>  
<!--标题2-->
                        <li class="title1b" id="aa2" onmouseover="document.getElementById('').style.display='inline';document.getElementById('').style.display='none';"><a href="" target="_blank">设计赛事</a></li>   
<!--标题3-->
                        <li class="title1b" id="aa3" onmouseover="document.getElementById('').style.display='inline';document.getElementById('').style.display='none';"><a href="">求职招聘</a></li>
<!--标题4-->
                       <li class="title1b" id="aa4" onmouseover="document.getElementById('').style.display='inline';document.getElementById('').style.display='none';"><a href="">论坛热点</a></li>
</ul>
</div>

<div class="neikuan">
<div id="a1" style="display: inline;">       <!-- 内容1-->
<div class="toutiao">
 <h1><a href="" title="德国设计(DESIGN DEUTSCHLAND)展览" target="_blank">德国设计(DESIGN DEUTSCHLAND)展览</a></h1>
<p>在去年的时候瑞士设计就来到无锡在无锡博物院进行展览,来宣扬瑞士设计的风格和精华,进行设计文化输出,几个大的木集装箱,全球巡游展览,... 
<a href="" target="_blank">[查看全文]</a></p>
</div>
    
<div class="news_line_bg">
<div class="news_zx_anniu"><a>热点关注</a></div>
<ul class="news_zx_liebiao">
<li><a href="" title="《魔兽世界》最完整高清宽屏壁纸下载" target="_blank">《魔兽世界》最完整高清宽屏壁纸下载</a></li>
<li><a href="" title="《魔兽世界-巫妖王之怒》高清宽屏壁" target="_blank">《魔兽世界-巫妖王之怒》高清宽屏壁</a></li>
<li><a href="" title="(图)人体艺术摄影的看法" target="_blank">(图)人体艺术摄影的看法</a></li>
<li><a href="" title="《魔兽世界全史》最完整壁纸设计(10" target="_blank">《魔兽世界全史》最完整壁纸设计(10</a></li>
</ul>
 
<div class="news_zx_anniu"><a>精品推荐</a></div>
<ul class="news_zx_liebiao">
<li><a href="" title="2010北京798艺术节.青年艺术家推荐展" target="_blank">2010北京798艺术节.青年艺术家推荐展</a></li>
<li><a href="" title="2010“老字号文化与品牌设计”专项比" target="_blank">2010“老字号文化与品牌设计”专项比</a></li>
<li><a href="" title="天山天池风景名胜区标志征集" target="_blank">天山天池风景名胜区标志征集</a></li>
<li><a href="" title="中国或将成最大游戏技术输入国" target="_blank">中国或将成最大游戏技术输入国</a></li>
</ul>
</div>

<div class="news_line_bg2">
<div class="news_zx_anniu"><a href="" target="_blank">产业焦点</a></div>
<ul class="news_zx_liebiao">
<li><a href="" title="Google邀请3.3万名小学生设计网站标" target="_blank">Google邀请3.3万名小学生设计网站标</a></li>
<li><a href="" title="CGDC 首批公布3名图像专家演讲人" target="_blank">CGDC 首批公布3名图像专家演讲人</a></li>
<li><a href="" title="日系Cosplay大搜查活动大奖揭晓" target="_blank">日系Cosplay大搜查活动大奖揭晓</a></li>
<li><a href="" title="中国或将成最大游戏技术输入国" target="_blank">中国或将成最大游戏技术输入国</a></li>
</ul> <div class="news_zx_anniu"><a href="" target="_blank">设计资讯</a></div>
<ul class="news_zx_liebiao">
<li><a href="" title="德国设计(DESIGN DEUTSCHLAND)展览" target="_blank">德国设计(DESIGN DEUTSCHLAND)展览</a></li>
<li><a href="" title="2010北京798艺术节.青年艺术家推荐展" target="_blank">2010北京798艺术节.青年艺术家推荐展</a></li>
<li><a href="" title="“尺.渡” 青年设计师七人海报邀请展" target="_blank">“尺.渡” 青年设计师七人海报邀请展</a></li>
<li><a href="" title="央视形象广告《水墨篇》获2010年纽约" target="_blank">央视形象广告《水墨篇》获2010年纽约</a></li>
    </ul>
</div>
    </div>


<div id="a2" style="display: none;">           <!-- 内容2-->
<div class="toutiao">
<h1><a href="" title="光大银行现金管理品牌征名+logo" target="_blank">光大银行现金管理品牌征名+logo</a></h1>
<p>关于现金管理品牌名称及logo征集活动 中国光大银行作为国内最早开展现金管理业务的银行之一,长期以来致力于为国际和国内集团企业客户提供... <a href="" target="_blank">[查看全文]</a></p>
</div>
<div class="news_line_bg">
<div class="news_zx_anniu"><a href="" target="_blank">平面大赛</a></div>
<ul class="news_zx_liebiao">
<li><a href="" title="第二届重庆市户外广告大赛开赛" target="_blank">第二届重庆市户外广告大赛开赛</a></li>
<li><a href="" title="5000元 浙江省政府征集质量奖标识及" target="_blank">5000元 浙江省政府征集质量奖标识及</a></li>
<li><a href="" title="一万元 四川乐山市沙湾区征集城市徽" target="_blank">一万元 四川乐山市沙湾区征集城市徽</a></li>
<li><a href="" title="50万元 “长白山”卷烟包装装潢设计" target="_blank">50万元 “长白山”卷烟包装装潢设计</a></li>
</ul>
<div class="news_zx_anniu"><a href="" target="_blank">标志大赛</a></div>
<ul class="news_zx_liebiao">
<li><a href="" title="天山天池风景名胜区标志征集" target="_blank">天山天池风景名胜区标志征集</a></li>
<li><a href="" title="珠海广电"高清会" logo征集" target="_blank">珠海广电"高清会" logo征集</a></li>
<li><a href="" title="光大银行现金管理品牌征名+logo" target="_blank">光大银行现金管理品牌征名+logo</a></li>
<li><a href="" title="20000元 林之神LOGO征集大赛" target="_blank">20000元 林之神LOGO征集大赛</a></li>
</ul>
    </div>
<div class="news_line_bg2">
<div class="news_zx_anniu"><a href="" target="_blank">工业大赛</a></div>
<ul class="news_zx_liebiao">
<li><a href="" title="第五届“华礼奖”中国国际礼品设计大" target="_blank">第五届“华礼奖”中国国际礼品设计大</a></li>
<li><a href="" title="2010第二届美的“美磁杯”电磁产品创" target="_blank">2010第二届美的“美磁杯”电磁产品创</a></li>
<li><a href="" title="第三届中国汽车设计大赛进行中" target="_blank">第三届中国汽车设计大赛进行中</a></li>
<li><a href="" title="2010年度中国创新设计大奖(红棉奖)" target="_blank">2010年度中国创新设计大奖(红棉奖)</a></li>
 </ul>
<div class="news_zx_anniu"><a href="" target="_blank">数码相关</a></div>
<ul class="news_zx_liebiao">
<li><a href="" title="2010 ChinaJoy Cosplay DV大赛大奖来" target="_blank">2010 ChinaJoy Cosplay DV大赛大奖来</a></li>
 <li><a href="" title="“永恒之塔”杯全国CG创意大赛即将启" target="_blank">“永恒之塔”杯全国CG创意大赛即将启</a></li>
 <li><a href="" title="“佛界.光影解读”佛教文化视觉展暨" target="_blank">“佛界.光影解读”佛教文化视觉展暨</a></li>
 <li><a href="" title="2888元 “幸福瞬间 锦绣之美”有奖征" target="_blank">2888元 “幸福瞬间 锦绣之美”有奖征</a></li>
</ul>
</div>
</div>

<div id="a3" style="display: none;">            <!-- 内容3-->
  <div class="qzzp_liebiao_l">
  <div class="qzzp_liebiao_bg">
  <div class="qzzp_liebiao_title"><a href="#" target="_blank">最新招聘信息</a></div>
  </div>
  <div class="qzzp_liebiao_biankuan"></div>
  </div>
  <div class="qzzp_liebiao_r">   <div class="qzzp_liebiao_bg">
  <div class="qzzp_liebiao_title"><a href="#" target="_blank">最新求职信息</a></div>
  </div>
  <div class="qzzp_liebiao_biankuan"></div>
  </div>
</div>

<div id="a4" style="display: none;">              <!-- 内容4-->
<li><a href="">室内渲染与表现作品</a></li>
<li><a href="">Alexander Gorlin 芝加哥镇上的小房设计</a></li>
<li><a href="">摄影作品:快乐崇拜</a></li>
<li><a href="">Nicola Zanetti精美书架设计</a></li>
<li><a href="">水晶闹钟图标欣赏</a></li>
<li><a href="">iconka最新图标作品欣赏</a></li>
<li><a href="">NBA29支队伍的球场界面欣赏</a></li>
<li><a href="">韩国饮食网站:samlipgf.co.kr页面设计赏析</a></li> 
</div>
</div>
</div>

解决方案 »

  1.   

    这个不用js也可以,直接在每个标签加上title=“标题”就可以了
      

  2.   

    <style type="text/css">
    .news_r {background-color:#FFFFFF;border-bottom:1px double #D5D5D5;border-left:1px double #E6E6E6;border-right:1px double #D5D5D5;height:326px;
    width:520px;float:left;}
    #news_nav_bg {background:url(images/k_bg.gif) repeat-x scroll 0 0 transparent;height:23px;width:520px;}
    .news_title {margin:0px;font-size:12px;}
    .title1a{float:left;width:99px;padding-top:5px;height:19px;font-weight:bold;text-align:center;}
    .title1b{float:left;width:99px;cursor:pointer;padding-top:5px;height:18px;text-align:center;}.neikuan {margin:5px;}
    .toutiao h1 {font-size:16px;text-align:center;padding-top:7px;}
    .toutiao p {color:#9D9D9D;height:20px;line-height:20px;text-indent:2em;}
    .toutiao {border:1px double #DFDFDF;height:64px;width:484px;}.news_line_bg {border:1px solid #000;background:url(images/news_line_bg.gif) repeat-x scroll 50% bottom transparent;float:left;height:90px;width:484px;}
    .news_zx_anniu{background:#eeeeee;float:left;width:20px;height:70px;text-align:center;}
    .news_zx_liebiao {float:left;font-size:12px;margin:0px;padding:5px;}
    .news_line_bg2{border:1px solid #000;width:484px;height:90px;}.qzzp_liebiao_l{width:245px;height:283px;float:left;margin-bottom:10px;}
    .qzzp_liebiao_bg{background:url(../images/qzzp_liebiao_bg.gif) no-repeat;width:245px;height:23px;}
    .qzzp_liebiao_biankuan{width:243px;height:260px;border-right:#dfdfdf 1px solid;border-left:#dfdfdf 1px solid;border-bottom:#dfdfdf 1px solid;}
    .qzzp_liebiao_title{height:23px;line-height:23px;text-align:center;}.qzzp_liebiao_r{width:245px;height:283px;float:left;margin:0 0 10px 10px;}
    </style><div class="news_r">
    <div id="news_nav_bg">
    <ul class="news_title">
    <!--标题1-->
    <li class="title1a" id="aa1" onmouseover="document.getElementById('a1').style.display='inline';document.getElementById('').style.display='none';">热点关注</li>   
    <!--标题2--> 
      <li class="title1b" id="aa2" onmouseover="document.getElementById('a2').style.display='inline';document.getElementById('').style.display='none';"><a href="" target="_blank">设计赛事</a></li>   
    <!--标题3--> 
      <li class="title1b" id="aa3" onmouseover="document.getElementById('a3').style.display='inline';document.getElementById('').style.display='none';"><a href="">求职招聘</a></li>
    <!--标题4--> 
      <li class="title1b" id="aa4" onmouseover="document.getElementById('a4').style.display='inline';document.getElementById('').style.display='none';"><a href="">论坛热点</a></li>
    </ul>
    </div><div class="neikuan">
    <div id="a1" style="display: inline;"> <!-- 内容1-->
    <div class="toutiao">
    <h1><a href="" title="德国设计(DESIGN DEUTSCHLAND)展览" target="_blank">德国设计(DESIGN DEUTSCHLAND)展览</a></h1>
    <p>在去年的时候瑞士设计就来到无锡在无锡博物院进行展览,来宣扬瑞士设计的风格和精华,进行设计文化输出,几个大的木集装箱,全球巡游展览,...  
    <a href="" target="_blank">[查看全文]</a></p>
    </div>
        
    <div class="news_line_bg">
    <div class="news_zx_anniu"><a>热点关注</a></div>
    <ul class="news_zx_liebiao">
    <li><a href="" title="《魔兽世界》最完整高清宽屏壁纸下载" target="_blank">《魔兽世界》最完整高清宽屏壁纸下载</a></li>
    <li><a href="" title="《魔兽世界-巫妖王之怒》高清宽屏壁" target="_blank">《魔兽世界-巫妖王之怒》高清宽屏壁</a></li>
    <li><a href="" title="(图)人体艺术摄影的看法" target="_blank">(图)人体艺术摄影的看法</a></li>
    <li><a href="" title="《魔兽世界全史》最完整壁纸设计(10" target="_blank">《魔兽世界全史》最完整壁纸设计(10</a></li>
    </ul>
      
    <div class="news_zx_anniu"><a>精品推荐</a></div>
    <ul class="news_zx_liebiao">
    <li><a href="" title="2010北京798艺术节.青年艺术家推荐展" target="_blank">2010北京798艺术节.青年艺术家推荐展</a></li>
    <li><a href="" title="2010“老字号文化与品牌设计”专项比" target="_blank">2010“老字号文化与品牌设计”专项比</a></li>
    <li><a href="" title="天山天池风景名胜区标志征集" target="_blank">天山天池风景名胜区标志征集</a></li>
    <li><a href="" title="中国或将成最大游戏技术输入国" target="_blank">中国或将成最大游戏技术输入国</a></li>
    </ul>
    </div><div class="news_line_bg2">
    <div class="news_zx_anniu"><a href="" target="_blank">产业焦点</a></div>
    <ul class="news_zx_liebiao">
    <li><a href="" title="Google邀请3.3万名小学生设计网站标" target="_blank">Google邀请3.3万名小学生设计网站标</a></li>
    <li><a href="" title="CGDC 首批公布3名图像专家演讲人" target="_blank">CGDC 首批公布3名图像专家演讲人</a></li>
    <li><a href="" title="日系Cosplay大搜查活动大奖揭晓" target="_blank">日系Cosplay大搜查活动大奖揭晓</a></li>
    <li><a href="" title="中国或将成最大游戏技术输入国" target="_blank">中国或将成最大游戏技术输入国</a></li>
    </ul><div class="news_zx_anniu"><a href="" target="_blank">设计资讯</a></div>
    <ul class="news_zx_liebiao">
    <li><a href="" title="德国设计(DESIGN DEUTSCHLAND)展览" target="_blank">德国设计(DESIGN DEUTSCHLAND)展览</a></li>
    <li><a href="" title="2010北京798艺术节.青年艺术家推荐展" target="_blank">2010北京798艺术节.青年艺术家推荐展</a></li>
    <li><a href="" title="“尺.渡” 青年设计师七人海报邀请展" target="_blank">“尺.渡” 青年设计师七人海报邀请展</a></li>
    <li><a href="" title="央视形象广告《水墨篇》获2010年纽约" target="_blank">央视形象广告《水墨篇》获2010年纽约</a></li>
    </ul>
    </div>
      </div>
    <div id="a2" style="display: none;"> <!-- 内容2-->
    <div class="toutiao">
    <h1><a href="" title="光大银行现金管理品牌征名+logo" target="_blank">光大银行现金管理品牌征名+logo</a></h1>
    <p>关于现金管理品牌名称及logo征集活动 中国光大银行作为国内最早开展现金管理业务的银行之一,长期以来致力于为国际和国内集团企业客户提供... <a href="" target="_blank">[查看全文]</a></p>
    </div>
    <div class="news_line_bg">
    <div class="news_zx_anniu"><a href="" target="_blank">平面大赛</a></div>
    <ul class="news_zx_liebiao">
    <li><a href="" title="第二届重庆市户外广告大赛开赛" target="_blank">第二届重庆市户外广告大赛开赛</a></li>
    <li><a href="" title="5000元 浙江省政府征集质量奖标识及" target="_blank">5000元 浙江省政府征集质量奖标识及</a></li>
    <li><a href="" title="一万元 四川乐山市沙湾区征集城市徽" target="_blank">一万元 四川乐山市沙湾区征集城市徽</a></li>
    <li><a href="" title="50万元 “长白山”卷烟包装装潢设计" target="_blank">50万元 “长白山”卷烟包装装潢设计</a></li>
    </ul>
    <div class="news_zx_anniu"><a href="" target="_blank">标志大赛</a></div>
    <ul class="news_zx_liebiao">
    <li><a href="" title="天山天池风景名胜区标志征集" target="_blank">天山天池风景名胜区标志征集</a></li>
    <li><a href="" title="珠海广电"高清会" logo征集" target="_blank">珠海广电"高清会" logo征集</a></li>
    <li><a href="" title="光大银行现金管理品牌征名+logo" target="_blank">光大银行现金管理品牌征名+logo</a></li>
    <li><a href="" title="20000元 林之神LOGO征集大赛" target="_blank">20000元 林之神LOGO征集大赛</a></li>
    </ul>
    </div> 
    <div class="news_line_bg2">
    <div class="news_zx_anniu"><a href="" target="_blank">工业大赛</a></div>
    <ul class="news_zx_liebiao">
    <li><a href="" title="第五届“华礼奖”中国国际礼品设计大" target="_blank">第五届“华礼奖”中国国际礼品设计大</a></li>
    <li><a href="" title="2010第二届美的“美磁杯”电磁产品创" target="_blank">2010第二届美的“美磁杯”电磁产品创</a></li>
    <li><a href="" title="第三届中国汽车设计大赛进行中" target="_blank">第三届中国汽车设计大赛进行中</a></li>
    <li><a href="" title="2010年度中国创新设计大奖(红棉奖)" target="_blank">2010年度中国创新设计大奖(红棉奖)</a></li>
    </ul>
    <div class="news_zx_anniu"><a href="" target="_blank">数码相关</a></div>
    <ul class="news_zx_liebiao">
    <li><a href="" title="2010 ChinaJoy Cosplay DV大赛大奖来" target="_blank">2010 ChinaJoy Cosplay DV大赛大奖来</a></li>
    <li><a href="" title="“永恒之塔”杯全国CG创意大赛即将启" target="_blank">“永恒之塔”杯全国CG创意大赛即将启</a></li>
    <li><a href="" title="“佛界.光影解读”佛教文化视觉展暨" target="_blank">“佛界.光影解读”佛教文化视觉展暨</a></li>
    <li><a href="" title="2888元 “幸福瞬间 锦绣之美”有奖征" target="_blank">2888元 “幸福瞬间 锦绣之美”有奖征</a></li>
    </ul>
    </div>
    </div><div id="a3" style="display: none;"> <!-- 内容3-->
    <div class="qzzp_liebiao_l">
    <div class="qzzp_liebiao_bg">
    <div class="qzzp_liebiao_title"><a href="#" target="_blank">最新招聘信息</a></div>
    </div>
    <div class="qzzp_liebiao_biankuan"></div>
    </div>
    <div class="qzzp_liebiao_r"><div class="qzzp_liebiao_bg">
    <div class="qzzp_liebiao_title"><a href="#" target="_blank">最新求职信息</a></div>
    </div>
    <div class="qzzp_liebiao_biankuan"></div>
    </div>
    </div> <div id="a4" style="display: none;"> <!-- 内容4-->
    <li><a href="">室内渲染与表现作品</a></li>
    <li><a href="">Alexander Gorlin 芝加哥镇上的小房设计</a></li>
    <li><a href="">摄影作品:快乐崇拜</a></li>
    <li><a href="">Nicola Zanetti精美书架设计</a></li>
    <li><a href="">水晶闹钟图标欣赏</a></li>
    <li><a href="">iconka最新图标作品欣赏</a></li>
    <li><a href="">NBA29支队伍的球场界面欣赏</a></li>
    <li><a href="">韩国饮食网站:samlipgf.co.kr页面设计赏析</a></li>  
    </div> 
    </div>
    </div>
    <script>
        var obj;
        var li=document.getElementById("news_nav_bg").getElementsByTagName("li");
        for(var i=0;i<li.length;i++){
            li[i].onmouseover=function(){
                var curr=document.getElementById(this.id.substring(1));
                curr.style.display="inline";
                if(obj==curr)return;
                if(obj)obj.style.display="none";
                obj=curr;
            }
        }
    </script>
      

  3.   

    <script>
    function show(id){
    var ids = ['a1','a2','a3','a4'];//如果要再加的话,可以直接将内容的id加入该树组
    for(var i=0;i<ids.length;i++){
    if(ids[i]==id){
    document.getElementById(ids[i]).style.display = "inline";
    }else{
    document.getElementById(ids[i]).style.display = "none";
    }
    }
    }
    </script><ul class="news_title">
    <!--标题1-->
    <li class="title1a" id="aa1" onmouseover="show('a1')">热点关注</li>   
    <!--标题2--> 
      <li class="title1b" id="aa2" onmouseover="show('a2')"><a href="" target="_blank">设计赛事</a></li>   
    <!--标题3--> 
      <li class="title1b" id="aa3" onmouseover="show('a3')"><a href="">求职招聘</a></li>
    <!--标题4--> 
      <li class="title1b" id="aa4" onmouseover="show('a4')"><a href="">论坛热点</a></li>
    </ul>