鼠标移入显示与收藏

             鼠标移入显示与收藏

开发工具与关键技术：DW  专题技术
作者：彭春怡
撰写时间：2019/2/1

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