小菜鸟的JS练习项目博客

这周我练习了一个网页动画项目，是由鼠标的滑入和滑出来隐藏和显示书籍的详细信息，代码块如下。
1.body内容：

好吗好的 好吗好的 阿三打卢克斯大林时代卡按时打卡十六点按你说的爱丽丝的看守的那是三年大理石肯定会

永无止尽的约会 永无止尽的约会 阿斯达克飒飒的拉克丝的阿萨大爱神的箭阿三的马什么的拉克丝的

(1)采用大表格套小表格 使其规范整齐 (2)将小表格统一合并单元格 并且设定统一的class属性 2.css的样式如下 .t{ display: none; } ps:在默认情况下使小表格隐藏 3.JS的代码如下： function yr(d){ var table=document.getElementsByClassName("t")[d]; table.previousElementSibling.style.display="none"; table.style.display="block"; } //鼠标移入事件 //先获取根据参数d（用于获取相同class属性集的下标）来获取节点 //把小表格上面的标题隐藏掉 //再把小表哥display属性改为 block 使其显示出来 function yc(d){ var table=document.getElementsByClassName("t")[d]; table.previousElementSibling.style.display="block"; table.style.display="none"; } //鼠标移出事件 //先获取根据参数d（用于获取相同class属性集的下标）来获取节点 //把小表格上面的标题显示出来 //再把小表哥display属性改为 none 使其隐藏回复原样。 4.代码做出来的代码效果如下