vue 滑鼠移入顯示圖示 ,滑鼠移出隱藏圖示
阿新 • • 發佈:2019-01-27
做一個專案用到好多次這個效果 沒有圖示, 滑鼠移入後,顯示背景色同時顯示圖示,滑鼠移到圖示上去之後圖示需要改變顏色,研究嘗試了不同的方法,使用的其他方法都遇到一些小問題,例如滑鼠移動到圖示上的時候背景色消失了。
滑鼠移入之前:
滑鼠移入之後效果:
方法一:(這個是找了好久,在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是否顯示