As shown in screenshot, I have buttons with an icon and text on top.
Buttons have hover states but hover states are only active when the part of the button without any overlaid text or icon is hovered.
I want my hover state to be active when the cursor is within the button’s boundaries even if there is an icon or text on top of the button.
What’s the best way to do this? I’m thinking I could put a transparent button on top but wondering if there’s a simpler way that doesn’t involve adding more elements.
@tjc4 Ah yes, what I meant was the group surrounding the button. So, the group that holds the button, the icon, and the text, bring that one to the front and apply the hover to the group vs. the button.
I have exactly the same problem. However, I do not really get your conclusion on how you fixed the problem.
Yes, I understood you need to have a group on top of the button where you apply the hover effect. So far so good.
Yet, as you mentioned there is no way to change the styling of the button or the shape itself triggered by the hover of a group on top of them. How did you do that?
It’s not clear why a text element was placed on top of the button in the previous examples, but the following method makes use of the button’s caption instead, and so it requires only two elements:
Having said all that, I’d probably use a Button element and then a Text element for the icon (so that the “icon” and caption could be positioned and styled independently). Then, I’d use an Option Set to store the icon- and button-specific info and an RG to output all the buttons in one fell swoop, thereby keeping things simpler and more maintainable.
@shot thanks for taking the time and elaborate on further options. I will keep them in mind.
One related topic: I have placed a text cell in each column of a repeating group layout which sources some data. So far, everything is working fine. However, I would like to have each row change color by hovering.
I read in a similar threat which is closed unfortunately, that the solution is to place the text cell in a group layout with the hover effect applied and the group layout in the RG layout. When I do this, I can not source the data, because the text cell does not have the option “Current cell’s…” anymore. Do you have any idea how to solve that properly?
If I understand correctly, then just “propagate” the data to the group - i.e. set the group’s Type of content to “Current cell’s…” and then set the text element to “Parent group’s…”.
