完成的功能主要是在，orgchart组织结构图上实现，将鼠标移动到node节点上，显示div（里面可以显示详细信息）
我是通过CSS实现的 ，如下
.orgchart .second-menu-icon {
height: 217px;
width: 200px;
transition: opacity 0.5s;
display: none;
right: -201px;
top: -2px;
z-index: 2;
color: rgba(3, 7, 3, 0.5);
font-size: 15px;
position: absolute;
background: #a2cae4;
}
.orgchart .second-menu-icon:hover {
color: #030f03;
}
.orgchart .node:hover .second-menu-icon {
display: block;
}
.orgchart 是组织结构图中的东西，node是他的子节点，.second-menu-icon是我们的要显示的div的class名。
如果对vue组织结构图有兴趣可以看看：https://spiritree.github.io/vue-orgchart/#/panzoom
下面说说我完成这点的关键吧
主要是display: none;这个属性，将我们的div 设置为隐藏。
.orgchart .node:hover .second-menu-icon {
display: block;
}
然后通过对node节点增加hover鼠标移动显示事件，来将.second-menu-icon 的display设置为 block;就是显示出来了。
其他的一些css 就是一些简单的布局了。我就不多BB了
其实我一开始是用的opacity:0; 刚开始不懂，这个属性的意思是设置透明度的，等于0，就是和隐藏效果差不多了，要他所代表的对象变化就将他设置为1就可以显示了。但那个对象是存在的。所以我项目中，在我的node节点旁边的时候移动鼠标也会出现。所以很烦，最后找到了display这个属性。最后完成了功能。。。
当然我觉得应该可以实现点击出现什么什么的 如用：
（偷个图）
还有JQ的toggle（）什么的也应该可以实现吧，但我不是专业前端的最后没搞出来。。。
第一次写这个东西，写的不好，如果有人看到了不要骂我啊。啊哈哈哈哈哈哈哈哈。。。。