鼠标上下动，关联内容相应变
技术与开发
我在网易新闻页面的网事一周板块中看到一个新奇的功能，鼠标指向不同的标题，就显示不同标题的关联内容，这个功能我非常喜欢，想应用到我的网站上，有难度吗？
这个功能能在有限的空间里显示更多的内容，非常实用设计也不难。要设计这个功能，我们先要将板块分为主显示区和关联内容区，然后添加隐藏图层用来显示关联内容，当鼠标移动到标题上时调用JavaScript代码显示相应的隐藏图层。利用相同的原理，我们还可以设计关联图片随鼠标移动变换显示的功能。
第一步 构建板块框架
板块框架相当于人的骨骼，有了坚实的骨骼才能支撑庞大的身躯。我们打开需要添加这种效果的页面的源代码，在
区中输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.cpcw.com/bzsoft）：＜div class="midT1"＞＜h2＞板块介绍＜/h2＞＜span＞＜a href="#"＞更多＜/a＞＜/span＞＜/div＞/*板块上部标题介绍，class名称可自己修改*/
＜div class="midList4"＞/*标题切换最外层，class名称可自己修改*/
＜h3 id="wsnav1" class="on" onMouseOver="javascript:wsWeekly（1）;" style="cursor:pointer;"＞＜span class="cBlue"＞04月9日＜/span＞＜a href="javascript:wsWeekly（1）;" target="_self">标题11＜/a＞＜/h3＞/*id为wsnav1，和JS代码中一致，可以自己修改，但必须保证和下面几个以及JS中一致，class为on，标题背景色，表示当前显示这一栏，onMouseOver函数调用下面的自定义函数wsWeekly（），参数1和wsnav1中一致。*/
＜div id="wscent1" style="display:block;"＞/*id为wscent1，为标题一详细介绍，可以自己修改，style为block表示显示*/
＜ul＞
＜li＞＜a href="#">详细介绍1＜/a＞＜/li＞/*标题1详细介绍1，可自行修改*/
＜li＞＜a href="#">详细介绍2＜/a＞＜/li＞/*标题1详细介绍2，可自行修改*/
＜li＞＜a href="#">详细介绍3＜/a＞＜/li＞/*标题1详细介绍3，可自行修改*/
＜/ul＞
＜/div＞
＜h3 id="wsnav2" onMouseOver="javascript:wsWeekly（2）;" style="cursor:pointer;"＞＜span class="cBlue"＞04月8日＜/span＞＜a href="javascript:wsWeekly（2）;" target="_self"＞标题2＜/a＞＜/h3＞/*ID为wsnav2，可以自行修改，当鼠标移上去时调用wsWeekly（2）函数*/
＜div id="wscent2" style="display:none;"＞/*标题2详细介绍，style为不显示*/
＜ul＞
＜li＞＜a href="#"＞详细介绍1＜/a＞＜/li＞/*标题2详细介绍1，可自行修改*/
＜li＞＜a href="#"＞详细介绍2＜/a＞＜/li＞/*标题2详细介绍2，可自行修改*/
＜li＞＜a href="#"＞详细介绍3＜/a＞＜/li＞/*标题2详细介绍3，可自行修改*/
＜/ul＞
＜/div＞
＜h3 id="wsnav3" onMouseOver="javascript:wsWeekly（3）;" style="cursor:pointer;"＞＜span class="cBlue"＞4月7日＜/span＞＜a href="javascript:wsWeekly（3）;" target="_self"＞标题3＜/a＞＜/h3＞/*ID为wsnav3，可以自行修改，当鼠标移上去时调用wsWeekly（3）函数*/
＜div id="wscent3" style="display:none;"＞/*标题3详细介绍，style为不显示*/
＜ul＞
＜li＞＜a href="#">详细介绍1＜/a＞＜/li＞/*标题3详细介绍1，可自行修改*/
＜li＞＜a href="#">详细介绍2＜/a＞＜/li＞/*标题3详细介绍2，可自行修改*/
＜li＞＜a href="#">详细介绍3＜/a＞＜/li＞/*标题3详细介绍3，可自行修改*/
＜/ul＞
＜/div＞
＜h3 id="wsnav4" onMouseOver="javascript:wsWeekly（4）;" style="cursor:pointer;"＞＜span class="cBlue"＞04月6日＜/span＞＜a href="javascript:wsWeekly（4）;" target="_self"＞标题4＜/a＞＜/h3＞/*ID为wsnav4，可以自行修改，当鼠标移上去时调用wsWeekly（4）函数*/
第二步 显示隐藏图层
板块框架有了，还需要血液流动，没有隐藏图层的切换，鼠标移动到相应标题上就没有效果。因此，需要接着上面的代码输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.cpcw.com/bzsoft）：
var wscid="wscent"+id;/*wscent+id名，如wscent1之类，和上文中一致*/
var wsnid="wsnav"+id;/*wsnav+id名，如wsnav1之类，和上文中一致*/
if（id==num）{
try{document.getElementById（wscid）.style.display="block"}catch（e）{};/*取得id，将wscid元素设为显示*/
try{document.getElementById（wsnid）.className="on"}catch（e）{};/*将wsnid即导航元素class设为on*/
}else{
try{document.getElementById（wscid）.style.display="none"}catch（e）{};/*将其余wscent设置为不显示*/
try{document.getElementById（wsnid）.className=""}catch（e）{};/*将其余wsnav的class清除*/
第三步 美化页面
有了骨骼和血液，页面就有了生气，但还需要穿上美丽的外衣，我们可以用CSS美化一下页面。在
区加上相关CSS代码即可（代码下载地址：http://www.cpcw.com/bzsoft）。总结
这种板块显示效果，在有限的空间里丰富了内容，并且将浏览主动权交给用户，体现了人性化的理念。此外，如果隐藏的是图片、Flash等，我们可以得到更炫目的效果，更能吸引访客的眼球。