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
b1mind3y ago
Ones for the li one is for the ahref
BimmerG87
BimmerG87OP3y ago
ik but i dont understand the result, its really simple and yet i dont get it
BimmerG87
BimmerG87OP3y ago
.mainNav a:hover {
background-color: orange;
}
.mainNav a:hover {
background-color: orange;
}
BimmerG87
BimmerG87OP3y ago
.mainNav li:hover {
background-color: orange;
}
.mainNav li:hover {
background-color: orange;
}
BimmerG87
BimmerG87OP3y ago
I mean why li doesnt change it to orange too?
b1mind
b1mind3y ago
Put it in a codepen We can help better understand
BimmerG87
BimmerG87OP3y ago
there you go
b1mind
b1mind3y ago
It's only going to change when it's hovered which it does
BimmerG87
BimmerG87OP3y ago
but if i comment a:hover, why li:hover doesnt work?
Mannix
Mannix3y ago
because inheritance goes down not up
b1mind
b1mind3y 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
b1mind3y ago
Good article for pretty much same method
BimmerG87
BimmerG87OP3y ago
that made it more confusing
b1mind
b1mind3y ago
They use :focus-within it looks like
Mannix
Mannix3y ago
li doesn't have background-color so hover on li doesn't change anything
BimmerG87
BimmerG87OP3y ago
but they used li:hover on this website.
Mannix
Mannix3y ago
??? what are you trying to achieve ?
BimmerG87
BimmerG87OP3y ago
i have the result but dont know how i got it😁
Mannix
Mannix3y 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
BimmerG87
BimmerG87OP3y 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
Mannix3y ago
when you hover over li that parent element has navigation class you will add that display property to element with class subNav
BimmerG87
BimmerG87OP3y ago
thanks a lot @mannix_
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View

Did you find this page helpful?