Streaming live at 10am (PST)

Code to make all the links in a div turn blue on hover


#1

Hi, I would like code to have all the links in a div turn blue at the same time when one hovers over it.

i.e. div Services brand development links

  • I would also like to be able to copy the code myself so that can create other divs and do the same thing for them.

For reference: https://forum.webflow.com/t/show-and-tell-feedback-appreciated/33974/4

www.flowglobemedia.com
https://preview.webflow.com/preview/flowglobemedia-nathan-steele?preview=a78b85db5b213b8d77fda00db8d59ed4

Best,

Nathan


#2

Hey Nathan,

try inserting this inside your custom code body section:


.services-brand-development-links:hover .services-brand-development a {
color: #59c3fe;

let me know if this works

Cheers
Chris

Ps. Really love that part of your site. keep it up.


#3

Hi @CallMeChris ,

I really appreciate the compliment. ***What is the best way to place the code in the body?

When I place it below the following script, it shows up in the footer. And when within the script tags, nothing happens. Thoughts?

Thanks @CallMeChris,

Nathan


#4

ah, man, I messed up. I'm sorry. I was in a rush this morning.

In the footer section of the custom would be just fine. But I gave you messy code above. So it couldn't work.

This one however does work. I tried it. You can see it here: http://playground-ba4ffa.webflow.io/ in very ugly colors.

You should be able to copy paste just like this in you custom code section and be golden.


.services-brand-development-links:hover .h2-services-branding-link a {
color: #59c3fe;}
.services-brand-development-links:hover .services-development-text a {
color: #59c3fe; }

Good luck :smiley:


#5

Hi @CallMeChris,

That was super helpful...I'm halfway there. When I rollover "BRAND" both turn blue, but when I rollover "DEVELOPMENT", only "DEVELOPMENT" turns blue. I'm super confused as to why it only partly works. Thoughts?

  • That playground file was super helpful..one thing I learned was adding the script tags...The reason why the code was showing up in the footer was because I was missing those tags.

Thanks @CallMeChris

Nathan


#6

P.S the code looks like this now: (screenshot because some of the code disappears in the text editor)

Best,

Nathan


#7

not completely sure what's going on.

it looks like the code I gave you doesn't target the first part .h2 services branding link.
When you undo the old hover color changes you made in the webflow designer you'll see what I mean.

The reason could be that you deactivated the link in there, and so the browser might not recognize it as the 'a' (which denotes a link) anymore. (not sure though)

So either reactivate that link or or delete the 'a' in your first line of code in the picture above and see if that helps.

It could also be a simple misspelling thing somewhere in there. Make sure that all the classes in your style code are exactly as the ones on your webpage. It's pretty easy to overlook something.

Other than these things I'm out of ideas for now

Happy hunting


#8

Thanks @CallMeChris

I got most of the way there...I think there are a couple of bugs that I'm dealing with at this point.

I really appreciate your help and have a great weekend!

Best,

Nathan


#9

You're welcome :blush:

Also, looks like you got it all working now. Sweet.


#10

I almost got it... the code somehow conflicted with interaction I have on them for the very last section of services, so back to the drawing board :stuck_out_tongue: https://forum.webflow.com/t/webflow-not-reading-css-properly-sore-thumb/34295

Anyway, thanks again :slight_smile:

Nathan


#11

https://www.flowglobemedia.com/ - good to go!


#12