4.2　导航栏鼠标悬停效果

案例描述

当鼠标移入导航栏标题中，会变换一种样式；当鼠标移出时，还原成原来的样式，如图4-13所示。

思路分析

• ▷　设置圆角矩形，复制“矩形”元件。

• ▷　设置“鼠标悬停”样式。

操作步骤

（1）选择“文件”|“新建”命令，新建一个Axure的文档。

（2）在“元件库”面板中将“矩形2”元件拖入编辑区中，双击输入“首页”，在工具栏中设置“字体尺寸”为15，单击“加粗”按钮，设置“填充颜色”为红色（#FF6633），x为45，y为75，“宽度”为60，“高度”为30，如图4-14所示。

（3）在右侧单击“样式”标签切换至“样式”面板，设置“圆角半径”为3，单击右侧的下三角按钮，弹出圆角面板，单击左下角和右下角区域，去除左下角和右下角的圆角设置，如图4-15所示。

（4）在“元件库”面板中将“矩形2”元件拖入编辑区中，在工具栏中设置“填充颜色”为红色（#FF6633），设置大小并调整至适当的位置，如图4-16所示。

（5）从“元件库”面板中将“矩形1”元件拖入编辑区中，双击并输入“淘宝商城”，在工具栏中设置“字体尺寸”为15，单击“加粗”按钮，设置“线段颜色”为无，x为110，y为75，“宽度”为90，“高度”为30，用同样的方法设置圆角矩形，并去除左下角和右下角的圆角设置，如图4-17所示。

（6）在右侧“属性”面板中的“交互样式设置”区域单击“鼠标悬停”超链接，弹出“交互样式设置”对话框，选中“线段颜色”复选框，单击右侧的下角按钮，在弹出的颜色面板中设置颜色值为#FCDAB9，设置“填充颜色”为橙色（#FFF9E2），如图4-18所示。单击“确定”按钮返回至编辑区中。

（7）按Shift+Ctrl快捷键向右拖动“矩形”元件，复制5个“矩形”元件，双击分别输入相应的内容，调整至适当的位置，如图4-19所示。

（8）按Ctrl+S快捷键，以“4.2”为名称保存该文件，然后按F5键预览效果，如图4-20所示。