懸停盒子

功能作用

• 實現頁面鼠標移入帶來的動態交互效果。

實現效果

一、模塊設置

• 路徑：編輯頁面——添加模塊——懸停盒子——拖到頁面合適位置

• 選擇鼠標移入的切換效果及手機顯示端。

• 保存後，鼠標移到模塊右上角會顯示兩個標籤，默認跟懸停。鼠標點擊切換兩個區，分別添加模塊到兩個區的盒子內容區，即可。（默認區是頁面默認顯示的內容，懸停區是鼠標移入顯示的內容）

二、使用方法

• 2.1 以上述動態圖爲例，先把默認的圖片模塊添加到默認區域

• 2.2 點擊模塊上方懸停切換到懸停，再把圖文模塊及文本模塊添加到懸停內容區

• 2.3 鼠標移至懸停盒子的樣式編輯，調整懸停的背景爲黑色，把透明度調爲一半左右，有磨砂透明效果 （可根據喜好調整）

• 2.4 細節調整二維碼及文字的模塊內邊距，使效果更佳。

• 2.5 PC完成效果

• 手機完成效果 （手機效果按教程第二步，可設置顯示是懸停還是默認的內容）