让无趣代码动起来,代码瞬间好玩又有趣

鼠标移入计划表显示,鼠标移出计划表隐藏

开发工具与关键技术:DW的JavaScript的鼠标移入移除、文档显示与隐藏结合
作者:周欢
撰写时间:2019/1/19

很多玩意只在我们用的时候才想要它出现,平时看起来就没那么占地方,下面我们来看一个JavaScript实现的实例

让无趣代码动起来,代码瞬间好玩又有趣

原理解析:当鼠标移入查看计划按钮(箭头所示)时,显示计划表并且改变文字;然后当鼠标移出收起按钮(也就是原先的查看计划按钮)时,它就将计划表隐藏起来了。从而实现了鼠标移入计划表显示,鼠标移出计划表隐藏

实现效果的代码截图:

让无趣代码动起来,代码瞬间好玩又有趣

附加源代码、样式代码图

让无趣代码动起来,代码瞬间好玩又有趣

cellspacing="0”: 取消表格中行与行之间的间距(红色圈出来的代码含义)
  字符实体中的一种,表示占一个字符
z-index :增加等级,起到提高权重问题
:nth-child(even) 偶数选择器 (奇数选择器:nth-child(odd)

让无趣代码动起来,代码瞬间好玩又有趣
蓝色箭头所示代码:
border-color: #fff transparent transparent transparent;设计白色的向上向下的小图标的小技巧,上右下左那一的需要就设计哪一个颜色(第一张图中的蓝色箭头指示)(transparent 透明色);
rgba(108,247,240, 1.00)具有透明效果的颜色,调整透明度主要是由第四个参数决定
box-shadow: 1px 2px 3px #fff; 盒子阴影效果1px代表的是水平方向的阴影;2px代表垂直方向的阴影;3px代表的是阴影模糊的距离;#fff代表颜色值。

提示:多加注意掌握有些小布局的技巧,可以减少代码书写量以及内存

之前出现类似问题,进行小小的总结。希望这个可以帮助到因为同样问题而苦恼的同仁。

如有疑问可在评论区留言,或者广大网友有其他更好的方案也可以在评论区留言,欢迎积极留言,我会时时关注动态