: Rectangle mouse over changes font color in Axure I am using Axure to create an interactive front-end prototype. In my design I have a table with 3 major cells (p.s. the cells are rectangles

@Berryessa866

There is a simpler method to do this (I think it was introduced in v7).

Groups have an option (within properties) to "Trigger mouse interaction styles". This means that interaction events are passed to all components within a group when the interaction event occurs on any individual component within the group.

To do this, you group the components together (select all the components and CTRLG), choose the properties tab and tick the "Trigger Mouse Interactions Styles.

This then allows you to set the interaction styles of each component within the group. The common one is hover. When you mouse over, you want the aggregate component to indicate that this has happened, so you may change borders, background color, etc. Just set the mouse over interaction style. When you move your mouse the group then the MouseOver interaction style will be applied for all components within the group.

This addresses a common problem when you have an icon and some text, say on a row within a list. You want the mouse over or mouse press to be indicated via the interaction style. Before this option was available you would get blind spots where mouse over didn't work (e.g. the icon) or you would get different press behaviour depending on where you pressed on the row.

Tip: if you only want to change the background, then you only need to set the MouseOver interaction style for the component that shows the background.

Vote Up Vote Down

@Miguel516

The easiest solution is to just use one widget – text with appropriate spacing around it.

The workaround for your situation with two separate widget goes like this:


Give a name to the text widget (this helps finding it during step 4)
Right click the text widget and select 'Interaction Styles'
Go to the tab 'Selected' and set the desired styles. Save the style.
Select the rectangle and add an 'OnMouseEnter' and 'OnMouseOut' case to select and deselect the text widget


Edit: Make sure the text sits below the rectangle, otherwise hovering over the text will remove the hover effect. Again, to state the obvious, unless there's a very specific reason for using two separate widgets I'd just use one.

Vote Up Vote Down