前幾天因工作需要做一個鼠標移入顯示隱藏菜單，鼠標移出自動隱藏菜單，

做的時候覺得沒有什么問題，做完后預覽就發現一個很嚴重的問題，就是鼠標移出一級菜單向二級菜單時二級菜單不顯示，或者二級菜單顯示三級菜單不顯示。

后來經過仔細檢查發現是因為一級菜單與二級菜單之間有間距，導致鼠標移出時

隱藏了二級菜單，以及沒有設置鼠標移入三級菜單顯示二級菜單，導致二級菜單自動隱藏。

現在把本次制作過程總結如下：

1、畫出四個大小相同的矩形框，然后分別放入對應的形狀(可以去阿里巴巴矢量庫iconfont下載，也可以不放形狀)，矩形框與形狀組合起來，設置為一級菜單，分別取名字，可以為每個一級菜單設置鼠標移入時選中的效果(看個人需要)，我這里設置了選中效果；

如圖所示，為一級菜單-合同管理，設置鼠標移入時顯示對應二級菜單-合同管理，同時設置選中一級菜單-合同管理，鼠標移出時隱藏二級菜單-功能總覽，同時取消選中一級菜單-功能總覽；為每個一級菜單設置同樣的交互方式。

2、為每個一級菜單分別畫出對應的二級菜單，(我這里每個一級菜單只畫出了一個二級菜單，大家可以嘗試多畫幾個)，二級菜單由一個底部的大矩形和多個小矩形組合成，在小矩形里面畫上文本框和相應箭頭，做成一個組合，給組合命名，就是二級分類菜單的名字，給組合設置移入移出組合顯示以及隱藏對應三級菜單，如圖所示。

3、然后設計三級菜單，過程同二級菜單設計過程，不同之處就是無需設置移入或者移出顯示的交互設計，直接設計交互鼠標單擊三級菜單顯示對應三級菜單頁面，如圖所示。

4、設計過程中需要注意，一級菜單和二級菜單之間不能有空隙，二級菜單和三級菜單也不能有空隙，否則容易造成，鼠標移入移出效果失敗，同時需要注意所有二級菜單疊加在一起，注意位置重合，三級菜單放在二級菜單后面，三級菜單疊加放在一起。

總結

以上是生活随笔為你收集整理的axure 鼠标变成手,Axure教程｜鼠标移入移出自动显示与隐藏三级菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。