鼠标移入显示与收藏
开发工具与关键技术：DW 专题技术
作者：彭春怡
撰写时间：2019/2/1
- 下面是一个简单的效果“鼠标移入显示与收藏”。
Html源代码：
用一个大盒子，里面套个盒子，再在盒子里面套俩个小盒子，一个设置鼠标移入显示与收藏的按钮，一个设置显示框里面的内容。
Css 样式代码：
“border-color: #1DE4ED transparent transparent transparent”设置按钮里面小箭头的关键，相当于设置一个小正方形，把它切成四个小三角形，再把三个小三角形隐藏，剩下的三角形便成了箭头。设置两个，一个是移入，一个是移出，鼠标移入与移出相互交换显示。
Js 实现效果代码：
“boog”设置显示框，“tabBtn”设置按钮。
实现鼠标移入显示与隐藏的关键，“block”实现隐藏的效果，“none”实现显示的效果。
接下来便是实现的效果：
图1.
图1是在鼠标还没有移入按钮的情况下。只是一个简单的页面。
图2
图2是鼠标移入按钮时所实现的效果。鼠标移入显示框内容便会显示。
总结：虽是一个简单的效果，但也是一个小知识。