Streaming live at 10am (PST)

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


#1

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,

Nathan


#2

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: http://forum.webflow.com/t/posting-guidelines-for-the-need-help-category/8094

Thanks in advance! smile


#3

Thank PixilGeek,

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

Best,

Nathan


#4

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.


#5

Hi @nathanphilsteele, Could you share the site read-only link: http://help.webflow.com/faq/general/how-do-i-share-my-sites-read-only-link

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

Cheers,
Dave


#6

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

Best,

Nathan


#7

Hi Dave,

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

Thanks Dave,

Nathan


#8

I now have a mockup https://preview.webflow.com/preview/bluelakecreative?preview=68cfbfda25786cb12e08e263487bbcaa 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

Issues:
* 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!

Best,

Nathan


#9

Hi @nathanphilsteele,

To change the color of your text on hover, use the hover state function that @jdesign mentioned: http://help.webflow.com/faq/how-do-you-change-the-hover-pressed-and-focused-pseudo-class-selectors-styles

To reveal content on hover, try this demo:
Demo: https://webflow.com/website/Demo-Kit
Page Title: Accordion
*Instead of using a click interaction, use a hover interaction smile

Hope this helps!


#10

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?...am I missing something?

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

Best,

Nathan


#11

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