在微信公众号的后台，有一种鼠标进入时能够改变颜色的选项。
在上图中能够看到，当鼠标指针进入某一个选项时，图标、文字以及背景矩形都改变了颜色。
图标与文字编程了绿色，背景矩形变为了灰色。
首先，我们准备元件。
一个选项的元件由一个形状图标、一个文本标签以及一个矩形组成。
矩形元件，我们需要设置默认的样式为灰色的虚线边框。
文本标签元件保持默认的样式，只需修改其中的文字。
图标同样是形状元件，保持默认的颜色。
但是，我给大家提供的素材中，这三个图标是SVG文件。
如何使用呢？
复制三个图标文件，粘贴到Axure的画布中。
此时，就能够看到三个重合在一起的图标。
把它们分开摆放。
但是，现在还不能正常使用。
因为此时它们还是SVG图像元件，不能改变颜色。
我们需要在图标上点击右键，选择[变换图片]子菜单中的[转换SVG图片为形状]的选项。
转换之后，SVG图片变成了一个组合。
在画布上方的快捷工具栏中点击[取消组合]按钮（或者在右键菜单中），删除多余的矩形元件，只保留图标的形状元件。
这样，我们就能够对图标进行填充颜色的设置了。
我们分别为图标、文本标签以及矩形元件设置[鼠标悬停的样式]，具体操作在《Axure的7种交互样式（1）-鼠标的交互样式》中有详细的讲解。
画布中点中所有的图标，在交互面板的属性设置中，点击[添加交互样式]按钮，将[鼠标悬停的样式]中[填充颜色]设置为绿色。
继续在画布中点中所有的文本标签，在交互面板的属性设置中，点击[添加交互样式]按钮，将[鼠标悬停的样式]中[字色]设置为绿色。
继续在画布中点中所有的矩形，在交互面板的属性设置中，点击[添加交互样式]按钮，将[鼠标悬停的样式]中[填充颜色]设置为灰色。
此时，在浏览器中查看原型的话，鼠标指针进入每个元件时，都会出现变色效果。
但是，并不会一个选项的所有元件同时改变颜色。
所以，我们需要解决的问题是，如何让鼠标指针进入某个选项的时候，三个元件能够一起改变颜色。
操作很简单，先把每个选项的元件组合起来，[组合]按钮在画布上方的快捷工具栏或者右键菜单中。
但是，仅仅组合的话，还是达不到我们想要的效果。
我们需要鼠标指针进入组合区域时，每个内部元件都能触发鼠标指针相关的交互样式。
接下来，就是最骚最重要的一步操作。
分别点中画布中的每个组合，在属性中勾选[触发内部元件鼠标交互样式]的选项。
此时，再次在浏览器中查看原型，就能够看到正确的结果了。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 元件组合的应用（1）