css：移动到一个div上出现另一个div

 

 

 

完成的功能主要是在，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（）什么的也应该可以实现吧，但我不是专业前端的最后没搞出来。。。

第一次写这个东西，写的不好，如果有人看到了不要骂我啊。啊哈哈哈哈哈哈哈哈。。。。