做一个项目用到好多次这个效果 没有图标， 鼠标移入后，显示背景色同时显示图标，鼠标移到图标上去之后图标需要改变颜色，研究尝试了不同的方法，使用的其他方法都遇到一些小问题，例如鼠标移动到图标上的时候背景色消失了。
鼠标移入之前：
鼠标移入之后效果：
方法一：（这个是找了好久，在SCDN上找到的，最便捷的方法，感谢大佬分享，解决了我的烦恼，是目前找到的最简单的方法，照搬的大佬的，望大佬原谅）
html代码：
<div class="father">鼠标移进来有惊喜哦
<p class="child">我是那个隐藏的小惊喜，鼠标引进来我就出现啦</p>
</div>
css代码：
.father .child{
display:none; //p的内容一开始设置为不可见
}
.father:hover .child{
display:block; //鼠标移入后，p的标签的内容为可见
}
这里有一点要注意，要显示的内容必须存在于其父级标签（即div标签）的子集标签（即p标签）中，否则无法生效。
填个小坑：如果是用scss的小伙伴，记得把上面的css改成SCSS的嵌套形式，才会有效果哦。
方法二：（这个是自己想的比较麻烦，结合vue使用）
<div class="father" >
<div v-if="show" class="child"></div>
</div>
在父div绑定mouseenter和mouseout事件， mouseenter：show=true , mouseout:show=false
子：根据show 值决定子div是否显示