How to select an element that is inside another element on hover?
What I have written is in this pen: https://codepen.io/anurag1989/pen/oNayPOv
The main problem is when I try to select the anchor tag (which is not hovered, and each anchor tag is inside a 'li' tag that in turn is inside an 'ul' with its siblings) which is not hovered, the CSS code does not work as expected. What is the problem with the code and why it is not working?
15 Replies
@anurag_1989
i guess this is what you want?
https://codepen.io/tok124/pen/ZEqRmop
👆
this
btw, you should really not put font-family on the universal selector, instead you should rely on inheritance, Kevin has already made a video about it. just add font-family to your body tag and it will be inherited by your other elements
| 👆 |²
| this |
keep in mind this will not work in firefox as of now 🙂
| 👆 |⅗
| this |
Thanks for the suggestion. I will keep that in mind
That's too difficult for me at the moment. Could you please explain the last two declaration for further clarity?
i don't think u need this part
this one on the other hand
it means, when the ul HAS an achor tag that's hovered or being hovered, then blur the anchor tags inside the li those r NOT hovered or beign hovered
in simple,
if u see any a tag inside the ul that is hovered then blur those a tags inside the li that r not hovered
can we customise it to select only elements that are before the selected one?
Also, can we write it like this: ul li a:not(:hover)?
dat doesn't seem to work so no
Hey, I found a way to do it withour using :has
ul:hover li a{
filter: blur(5px);
}
ul li:hover a{
filter: none;
} ul li a:hover::before{ background-color: #EE5624; z-index: -1; } The order is important here
ul li:hover a{
filter: none;
} ul li a:hover::before{ background-color: #EE5624; z-index: -1; } The order is important here
i have no idea how it works..but it's cool 😂
Can you please explain the logic behind it? Thanks!
I think I have got the proper explanation to this:
1) a:not(:hover) --> This selects all anchor tag that are not being hovered.
2) li a:not(:hover) --> Selects all anchor tag that are not beings hovered and are descendents of li
3) ul:has(a:hover) li a:not(:hover)--> Select all anchor tag that are not being hovered over and are descendents of li which in turn is an descendent of ul but it has an anchor tag that is being hovered over. So, when any of the anchor tag is hovered, only then the blur() is applied to those anchor tags that are not being hovered. Else, when none of the anchor tag is being hovered, then u:has(a:hover) results to false, hence, none of the anchor tag is blurred.
This is my understanding. Please suggest in case of any improvement.
Well, I have found another solution to this (not authored by me):
ul:hover a{
filter: blur(5px);
}
ul a:hover{
filter: blur(0px);
}
1) First, we are making the whole ul containing all anchor tag to blur when it is hovered over.
2) But we don't want the anchor tag which is being hovered over to blur. So, we have dfined blur to 0px in this case. Hence, the only anchor tag which is hovered over will not be blured and rest content of ul will be blured.
Yeah anurag, that's what I did that you asked me to explain 🙂