懸停盒子模塊

功能作用

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

實現效果

一、模塊設置

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

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

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

二、使用方法

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

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

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

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

• 2.5  PC完成效果
  
  

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