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是否顯示