起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure：PC端常見圖片展位懸停效果（二）
在前一篇文章Axure：PC端常見圖片展位懸停效果（一）介紹過鼠標懸停時圖片放大的效果。本篇我們繼續嘗試使用用axure，實現以下效果：懸停時邊框突出（或增加陰影）。
再重新看一下我們要實現的效果：
優酷視頻列表 – 懸停時有陰影
當當網商品列表 – 懸停時連線變化
所需要元件：圖片元件 * 1；
涉及交互事件（用例）：無；
涉及動作：無；
涉及動畫：無；
關鍵設置：（元件的）交互樣式。
元件的“交互樣式”
我們在文章?Axure：巧用交互樣式實現多tab切換效果?中使用過元件的“交互樣式”。
目前，axure支持大部分的基本元件的“交互樣式”設置。
右鍵元件，即可在菜單中找到“交互樣式”入口。
目前，可以設置元件常見的4個狀態的交互樣式：
- 鼠標懸停；
- 鼠標按下；
- 選中；
- 禁用。
以下進入制作過程 —— 其實非常簡單！
懸停時突出邊框
- 拖入一個圖片（元件）；
- 右鍵圖片菜單選擇“交互樣式”，進入交互樣式設置；
- （默認的）在“鼠標懸?！眛ab下做以下設置。
a、（勾選）線段顏色 —— 樣例中使用的是0099FFF；
b、（勾選）線寬 ——?樣例中使用的是3號線。
實際練習中應該根據實際情況自行設置相應屬性及值。設置好之后效果就出來了，如下圖：
懸停時增加陰影
- 拖入一個圖片（元件）；
- 右鍵圖片菜單選擇“交互樣式”，進入交互樣式設置；
- （默認的）在“鼠標懸?！眛ab下做以下設置。
（勾選）外部陰影? ——?樣例中的設置是，x、y軸偏移值都為0，模糊值為10，顏色為默認值。
如下圖所示：
實際練習中應該根據想要的效果自行設置相應屬性及值。
設置好之后效果就出來了，如下圖：
注意：該效果在預覽時，會有一個小情況 —— 第一次圖片懸停時可能會閃動縮放一下。仔細查找著相應設置，并未發現出錯的地方，可能是axure生機的html文件，或者瀏覽器渲染的問題，知道即可，不必過于糾結。（當然，若哪位大俠知道這個原因，也請告之一下，不甚感謝）
寫在最后
以上效果預覽：https://4o2c1f.axshare.com
日常練習時，一些相對常見簡單的交互，基本都可以在“交互設置”中體現。
我們本次只了嘗試了兩個效果，通過“交互設置”的設置界面，我們可以看到有很多的設置（效果），可以依次都嘗試一下，等到實際需要時選擇最合適的設置。
相關閱讀
本文由 @牧逸 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Pexels，基于 CC0 協議
??