在项目开发的时候，遇到了这样的需求：鼠标移入后显示按钮，鼠标移出后按钮消失，通过对问题的研究，笔者使用display:none和display:block进行转换，但却出现了失效的问题
整体思路是在要显示的内容外层套个div，div内的内容为display:none，当鼠标移入时，即div:hover时，display:block显示内容
但当笔者第一次运用这种方法的时候，却发现行不通，错误代码如下：
.title { display: flex; align-items: center; flex: auto; } .showicon { display: none; .iconlist { margin-left: 50px; } } .showicon：hover { display: block; }
上述代码犯了一个很简单也很容易错的逻辑误区，就是用display:none的元素去display:block，好比你在一个房间中，把唯一的油灯拿走了，却还想在房间里开灯
解决办法是用父元素去引用hover，代码如下：
.ta-company { flex: auto; display: flex; align-items: center; height: 28px; .title { display: flex; align-items: center; flex: auto; } .showicon { display: none; .iconlist { margin-left: 50px; } } &:hover .showicon { display: block; } }
通过父元素，即代码中类为.ta-company的元素，去&:hover对应的元素，达到解决目的
