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

Design help Custom code
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: Show and tell - feedback appreciated - #4 by GourmetPixel

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

1 Like
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: Webflow not reading custom css

Anyway, thanks again :slight_smile:

Nathan

11

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