I have a question about hover interaction. I want to make text underlined when other element hovered.
normally if I set text underlined on hover, the text is hovered, the underline is presented. that is same element.
but I would like to know when different element is hovered, the text would be underlined. please refer to the image attached.
if the image in ‘A’ space is hovered, I want to make text in ‘B’ space underlined.
is there anyway to connect the image interaction to the text in different space?
Sure, the steps are a little confusing in this text post, but I’ll type it in sequence:
On element “B”, go to Styles panel and add a “bottom border”. Click only the bottom line and add a 1 pixel border (or whatever the size). Then click color and choose transparent.
This is only on the element you “want the color to change”.
Next, click on the “A” trigger. Whatever button or text element it is. Go to interactions, add a new interaction. Inside the interaction, click on element “B” again, then click “+” sign to add it to the panel. Choose ‘Border Color’. At the bottom select your color.
It doesn’t allow to choose the border edge here. If you understand what I mean, you can’t select bottom versus top and so on. Which is why you must add a border beforehand.
You will need to add this to both, 1st & 2nd click. Or hover, or whatever you desire.
Thanks garymichael for your reply!
I tried the way you told me, it works well. but I would like to know the way to make each sentences underlined when the screen size is smaller than now like tablet, mobile.
please refer to the image I attached here.
now I used another text element for underline, it is hidden normally. it is only shown when the trigger is hovered(at that time the original text element is hidden),so it is working visually but I am not sure it is right way or not… I think there is better way to solve this problem.
