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:
Where ".parent-selector" is the selector for the links container.
...ah, and just add your normal styles to the hovered item.Do you have a time?
It is not working.
If possible, can we have a chat in the voice chat?
The best thing you could do is set up a codepen or similar and share your code.
Where do I write the code that makes the other anchor tags gray?
That is the code and this is what I wrote:
https://codepen.io/FESODI/pen/zYVZJBo
Can you please help me with it now?
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 hoveredIn that case, parent element is .hidden-menu-links-anchor.
Right?
no, the parent is
.hidden-menu-links
that's the parent of the hovered element and the elements you want to style
It is not working.
yes it is
In my code I have a position absolute for the .hidden-menu-links-anchor-text.
Does this affect?
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
I am using chrome
Way it does support.
as I'm looking at it, you're missing the
. to indicate a class selector
Can you look at the original code now?
you've got two typos
.hidden-menu-links:has(:hover) .hidden-menu-links-anchor:not(:hover)What about now?
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
Should this code work?
yes
I can now load your codepen and see the effect working as intended
does it work for you?
It is working but not on my project. : )
Yes, it is working.
Only on codepen.
can't help you more without seeing the original code then I'm afraid
Do you have a free time now?
I will share my screen in the audio chat?
go ahead
Thank you so much again : ).