Hover effect

How can I make a hovered anchor tag white while others being gray just like this?

31 Replies

Assuming you are OK with using :has() you can do this by adding the hover effect (gray) on all of the elements (except the one with the hover) like this:

.parent-selector:has(:hover) > a:not(:hover){
  filter: grayscale(1);
  [your hover styles here....]
}

.parent-selector:has(:hover) > a:not(:hover){
  filter: grayscale(1);
  [your hover styles here....]
}

Where ".parent-selector" is the selector for the links container. ...ah, and just add your normal styles to the hovered item.

FES001•3mo ago

Do you have a time? It is not working. If possible, can we have a chat in the voice chat?

Chris Bolson•3mo ago

The best thing you could do is set up a codepen or similar and share your code.

FES001•3mo ago

FES001•3mo ago

Where do I write the code that makes the other anchor tags gray?

FES001•3mo ago

That is the code and this is what I wrote:

FES001•3mo ago

https://codepen.io/FESODI/pen/zYVZJBo Can you please help me with it now?

Alex•3mo ago

you need to put :has(:hover) on the parent element that selector means if an element contains an element which is hovered, apply this style to everything in it that is not hovered

FES001•3mo ago

In that case, parent element is .hidden-menu-links-anchor. Right?

Alex•3mo ago

no, the parent is .hidden-menu-links that's the parent of the hovered element and the elements you want to style

FES001•3mo ago

It is not working.

Alex•3mo ago

https://codepen.io/Beanie127/pen/dyBvqpJ?editors=1100

Beanie127

CodePen

dyBvqpJ

...

Alex•3mo ago

yes it is

FES001•3mo ago

In my code I have a position absolute for the .hidden-menu-links-anchor-text. Does this affect?

Alex•3mo ago

it shouldn't do That codepen I linked is your code, plus the line required if that doesn't work for you, it might be that your browser doesn't support one or more of the features used, but :has and :not have both been supported since 2022 in all browsers except firefox, which added support for :has late last year

FES001•3mo ago

I am using chrome Way it does support.

Alex•3mo ago

as I'm looking at it, you're missing the . to indicate a class selector

FES001•3mo ago

Can you look at the original code now?

Alex•3mo ago

you've got two typos .hidden-menu-links:has(:hover) .hidden-menu-links-anchor:not(:hover)

FES001•3mo ago

What about now?

Alex•3mo ago

It's still wrong. You need a . at the start of the selector, because hidden-menu-links is a class. Without the . the browser is looking for an HTML element called 'hidden-menu-links', determining that it doesn't exist, and then ignoring everything else literally copy and paste the code I shared right there and it will work

FES001•3mo ago

Should this code work?

Alex•3mo ago

yes I can now load your codepen and see the effect working as intended does it work for you?

FES001•3mo ago

It is working but not on my project. : ) Yes, it is working. Only on codepen.

Alex•3mo ago

can't help you more without seeing the original code then I'm afraid

FES001•3mo ago

Do you have a free time now? I will share my screen in the audio chat?

Alex•3mo ago

go ahead

FES001•3mo ago

Thank you so much again : ).

Gaming

Programming

Hover effect