Axure RP 10鼠标悬停效果

思路：拖动所需元件-设置元件“鼠标悬停”的交互样式

应用场景：网站上的导航、模块和元素在鼠标悬停时，通常会通过改变背景色、字体样式或添加边框等方式来响应用户操作。

1 拖入所需元件

拖入矩形元件，调整大小和位置，然后将图片元件、标题元件和文本段落元件拖入矩形元件内

插入图片，输入文字

2 设置矩阵元件的交互样式

选择矩阵元件，在右侧框的形状属性SHAPE PROPERTIES中选择“添加样式效果(+Add Style Effect)”，点击“鼠标悬停(MouseOver Style)”

设置“线段颜色(Line Color)”，“线宽(Border Thickness)”，“线型(Border Pattern)”

按F5键预览效果，如下图

若图片遮盖了矩形元件的外框，可将图片层级下移，将矩形元件的填充颜色设置为透明

3 问题讨论

当鼠标悬停在图片元件、标题元件和文本段落时，矩形元件的外框样式不再显示，应该如何解决？
解决方案：将矩形元件的层级设置为最顶层，此时矩形元件的外框显示不受影响，但图片元件、标题元件和文本段落的交互样式无法显示