Hover state of a button inside a dynamic pannel is not showing right properties and is not clickable

[cyogesh56]

Intended Behavior:
I’m working on a card design which has a view button that shows up when you hover over the image area. And when you hover over the button it changes background color and when it is clicked, it should take you to next page.

The issue:
However, none of this is happening, no matter how I try to do it. I’ve tried recreating the button and the card multiple times and multiple ways, but the problem persists. Is this a bug or am I doing something wrong? Here’s the link to the Axure file: https://fufu6d.axshare.com/

More Info:
The reason I’m going the Dynamic panel route is that I’m creating multiple states of the card and certain behaviors that I can define based on where it appears.

I’ve also attached two gifs showing the behavior as well.

Button Default specs:

• Fit to text height
• Fit to text width
• Lock distance between widget and vertical center of group or panel
• Lock distance between widget and horizontal center of group or panel
• Corner radius: 4px
• Font size: 16px
• Background color: #ffffff (70%)
• Border: none
• Left padding: 16px
• Right padding: 16px
• Top padding: 8px
• Bottom padding: 8px
• Text Alignment: Center & Middle

Button Hover specs:

• Background Color: #f2f2f2 (100%)
• Line Color: #ffffff (100%)
• Border Thickness: 2px

[cyogesh56]

Here’s the link to the Axure file: Card-Test.rp (2.0 MB)

[BenHoang_Axure]

It seems the interaction below is the reason you’re encountering this behavior:

When the mouse enters this hotspot (the image area), “Mouse Enter” triggers and the button (view) appears. Then, when the mouse goes over the area of the button, the “Mouse Exit” event is triggered and hides the button.

Something you can do to resolve this is to add a condition to the “Mouse Exit” event where it can only fire if the cursor is not over the area of the button.

On the button widget, you also have the “Set Selected” and “Open Link” actions integrated under the same event and separating these will allow you to open the next page when clicked.

I’ve made these edits to a simplified version of your .rp file. Hope that helps!

Card-Test - Axure Edit.rp (976.3 KB)

[cyogesh56]

Great!! Thank you so much!! I have been fiddling around with the interactions for so long and you solved it in mere minutes!

[system]

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.