Streaming live at 10am (PST)

How to make text underlined when other element hovered

Hi, guys

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?

Many thanks in advance!!

image

Here is my public share link: LINK
(how to access public share link)

Hi @Yeram_Youk,

Sure, the steps are a little confusing in this text post, but I’ll type it in sequence:

  1. 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.

bottom%20border

This is only on the element you “want the color to change”.

  1. 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.

  1. You will need to add this to both, 1st & 2nd click. Or hover, or whatever you desire.

That’ll work, see ya :slight_smile:

2 Likes

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.

%EC%9D%B4%EB%AF%B8%EC%A7%80%203

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.

thanks!!

If there’s two sentences then you add both sentences in the interactions panel. Not sure what you’re trying to do.