Two words on separate lines, one beneath the other, that change color simultaneously when one either is mouse over

Two words on separate lines, one beneath the other, that change color simultaneously when one or the either is moused over. Additionally, the words need to be a align left and right. Each will have it’s own font separate font and letter spacing. Also, they will align right and left perfectly via letter spacing between characters. Too, when either are clicked, text will expand below the bottom word (this functionality is understood), but is stated to show that animation is involved on click. Open to however it takes to achieve this affect, be it one button, one linked text, two buttons, etc.

Additional info:

  • Chrome
  • Mac Book

as is:

on mouse over:

on click/activated:

Thank you in Advance,


Hello @nathanphilsteele

Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category

Thanks in advance! :slight_smile:

Thank PixilGeek,

Please feel free to let me know if you need more info.



I suggest a Div and add the the two text sections inside the Div and then assign a hover state to the div OR give a class to both the text boxes and assign a hover state to the class. Either way should work just a matter of how you prefer to structure.

1 Like

Hi @nathanphilsteele, Could you share the site read-only link:

It is much easier to check this with the read-only link :smile:


Thanks jdesign! I will give that a go and see what happens



Hi Dave,

Right now, it’s in mockup form…I just wanted to make sure that I could translate my vision/design.

Thanks Dave,


I now have a mockup and I’ve run into a few issues:

Current structure so far:

  • a container with 3 divs inside
  • the text links “BRAND” and “DEVELOPMENT” with each floating left within the fist div. Both text links have their own classes.
  • the second is for the expanding text
  • the third div is the blue line divider


  • The line div floats up over the expanding text div
  • The toggle interaction to collapse the text back does not work
  • giving the div with the linked texts it’s own class and making the hover state blue does not work - only the one does.

To note: I currently only have the interactions set on “BRAND” and not “DEVELOPMENT” - I want to figure out the first issues before moving forward

Thank you in advance!



Hi @nathanphilsteele,

To change the color of your text on hover, use the hover state function that @jdesign mentioned:

To reveal content on hover, try this demo:
Page Title: Accordion
*Instead of using a click interaction, use a hover interaction :smile:

Hope this helps!

Thanks for the reply. The I do have the hover working however, I want both to turn blue at the same time when I hover over either.

How can I make this possible?

How will the hover action work when seen via mobile?..will it not expand all to reveal the content? Why is the div blue line div going over the expanded text…how do I prevent that? I missing something?

If you look at my link above, you will be able to see all of this



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