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 I just put close together) I focus on. In those cells I have some text, but the are separate files on the 'Outline of the page'. I have grouped the text and the rectangle for each rectangle in their own groups.

Now what I want to do is be able to hover over the rectangle and the text will change colors. I do not want to hover over the text, I just want to be able to hover over the rectangle its self and be able to change the color of the font.

Here is an image of the table, all of the marked out red stuff is text. IMAGE

How can I do this?


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:

  1. Give a name to the text widget (this helps finding it during step 4)
  2. Right click the text widget and select 'Interaction Styles'
  3. Go to the tab 'Selected' and set the desired styles. Save the style.
  4. 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.

enter image description here enter image description here enter image description here


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.