vue 鼠标移入显示图标 ,鼠标移出隐藏图标

做一个项目用到好多次这个效果   没有图标， 鼠标移入后，显示背景色同时显示图标，鼠标移到图标上去之后图标需要改变颜色，研究尝试了不同的方法，使用的其他方法都遇到一些小问题，例如鼠标移动到图标上的时候背景色消失了。

鼠标移入之前：

 

鼠标移入之后效果：

方法一：（这个是找了好久，在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是否显示