What is the difference between these 2 hover elements?

.mainNav li:hover {
background-color: orange;
}
.mainNav li:hover {
background-color: orange;
}
.mainNav a:hover {
background-color: orange;
}
.mainNav a:hover {
background-color: orange;
}
24 Replies
b1mind
b1mind2y ago
Ones for the li one is for the ahref
Aman
Aman2y ago
ik but i dont understand the result, its really simple and yet i dont get it
Aman
Aman2y ago
.mainNav a:hover {
background-color: orange;
}
.mainNav a:hover {
background-color: orange;
}
Aman
Aman2y ago
.mainNav li:hover {
background-color: orange;
}
.mainNav li:hover {
background-color: orange;
}
Aman
Aman2y ago
I mean why li doesnt change it to orange too?
b1mind
b1mind2y ago
Put it in a codepen We can help better understand
Aman
Aman2y ago
there you go
b1mind
b1mind2y ago
It's only going to change when it's hovered which it does
Aman
Aman2y ago
but if i comment a:hover, why li:hover doesnt work?
Mannix
Mannix2y ago
because inheritance goes down not up
b1mind
b1mind2y ago
Una Kravets
CSS-Tricks
Solved with CSS! Dropdown Menus | CSS-Tricks
A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites. Let’s see if we can make one of these menus with CSS alone.
b1mind
b1mind2y ago
Good article for pretty much same method
Aman
Aman2y ago
that made it more confusing
b1mind
b1mind2y ago
They use :focus-within it looks like
Mannix
Mannix2y ago
li doesn't have background-color so hover on li doesn't change anything
Aman
Aman2y ago
but they used li:hover on this website.
Mannix
Mannix2y ago
??? what are you trying to achieve ?
Aman
Aman2y ago
i have the result but dont know how i got it😁
Mannix
Mannix2y ago
if you want to change property of a element on hover you need to select the same element you can't select it's parent so if a has bg-color you need to use a:hover to change the bg-color if the bg-color is on li you need to use li:hover like i don't see why are you so confused tbh 😄 you can't have bg-color on a and put hover on it's parent li and expect it to work
Aman
Aman2y ago
thanks man, this line made it nice n clear idk the thing was small but i just... one more thing
.navigation li:hover .subNav{
display:block;
}
.navigation li:hover .subNav{
display:block;
}
does this mean that when hover over list with class navigation, set display of subNav to block?
Mannix
Mannix2y ago
when you hover over li that parent element has navigation class you will add that display property to element with class subNav
Aman
Aman2y ago
thanks a lot @mannix_
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Want results from more Discord servers?
Add your server