Menu
I have a specific problem with my simple horizontal navigation bar. When I set background-color for the whole ul, I get changes on hover only for text, but not for the background. I've tried to set li:hover and a:hover but everything was the same. For example, when I set a different color for background-color property (black, red...) everything is fine, but with rgba value it doesn't work on a screen bigger than 600px. I want to have the same effect on both and only set a different color makes a problem, as I see. Can someone, please, tell me where is my mistake and how can I fix it?
Here's my Code
body {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.item2 {
grid-area: navbar;
}
.item2 ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.item2 ul li>a {
display: block;
text-decoration: none;
text-align: center;
color: ivory;
padding: 5px;
border-bottom: 1px solid saddlebrown;
background-color: rgb(44, 33, 30);
}
.item2 li a:hover {
color: sandybrown;
background-color: rgba(44, 33, 30, 0.8);
}
@media only screen and (min-width: 600px) {
.item2 ul {
overflow: hidden;
background-color: rgb(44, 33, 30);
}
.item2 ul li {
display: inline;
float: left;
}
.item2 ul li>a {
display: inline-block;
padding: 12px;
border-right: 1px solid saddlebrown;
background-color: rgb(44, 33, 30);
}
.item2 li:hover a {
background-color: rgba(44, 33, 30, 0.8);
color: sandybrown;
}<div class="item2">
<ul>
<li><a href="#">Biographie</a></li>
<li><a href="#">Œuvre</a></li>
<li><a href="#">L'homme politique</a></li>
<li><a href="#">Postérité</a></li>
</ul>
</div>
558
Changing link color on hover using CSS To change the color of your link on hover, use the :hover pseudo property on the link's class and give it a different color.
To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.
'a' means the "anchor" tag in the html part, which looks like this... "<a href="#">some text</a>" "li a:hover", means whenever you 'hover' (move onto) your cursor on the link (i.e., 'anchor' tag) which is present inside the 'list' (i.e., li), the background color of that part will change to the "#111111".
Apply hover effect to anchor tag if possible
a:hover{}
178
The issue you have here is cause by having this style:
@media only screen and (min-width: 600px) {
.item2 ul {
overflow: hidden;
background-color: rgb(44, 33, 30); <--- container background.
}
}
its the same background so the elements will not have background rgba() clearly visible, I changed to color:#CCC so that you notice the issue:
body {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.item2 {
grid-area: navbar;
}
.item2 ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.item2 ul li>a {
display: block;
text-decoration: none;
text-align: center;
color: ivory;
padding: 5px;
border-bottom: 1px solid saddlebrown;
background-color: rgb(44, 33, 30);
}
.item2 li a:hover {
color: sandybrown;
background-color: rgba(44, 33, 30, 0.8);
}
@media only screen and (min-width: 600px) {
.item2 ul {
overflow: hidden;
background-color: #CCC;
}
.item2 ul li {
display: inline;
float: left;
}
.item2 ul li>a {
display: inline-block;
padding: 12px;
border-right: 1px solid saddlebrown;
background-color: rgb(44, 33, 30);
}
.item2 li:hover a {
background-color: rgba(44, 33, 30, 0.8);
color: sandybrown;
}<div class="item2">
<ul>
<li><a href="#">Biographie</a></li>
<li><a href="#">Œuvre</a></li>
<li><a href="#">L'homme politique</a></li>
<li><a href="#">Postérité</a></li>
</ul>
</div>Your selector of the :hover is too weak: it should be analog to the none hover:
.item2 ul li > a {}
.item2 ul li > a:hover {}
This works for me well:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
padding: 0;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
.item2 {
grid-area: navbar;
}
.item2 ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.item2 ul li > a {
display: block;
text-decoration: none;
text-align: center;
color: ivory;
padding: 5px;
border-bottom: 1px solid saddlebrown;
background-color: rgb(44, 33, 30);
}
.item2 ul li > a:hover {
color: sandybrown;
background-color: red;
}
@media only screen and (min-width: 600px) {
.item2 ul {
overflow: hidden;
background-color: rgb(44, 33, 30);
}
.item2 ul li {
display: inline;
float: left;
}
.item2 ul li > a {
display: inline-block;
padding: 12px;
border-right: 1px solid saddlebrown;
background-color: rgb(44, 33, 30);
}
.item2 ul li > a:hover {
background-color: yellow;
color: sandybrown;
}
}
</style>
</head>
<body>
<div class="item2">
<ul>
<li><a href="#">Biographie</a></li>
<li><a href="#">Œuvre</a></li>
<li><a href="#">L'homme politique</a></li>
<li><a href="#">Postérité</a></li>
</ul>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
