My goal is to change the background color of an element when the cursor hovers over it. Oddly enough, the transition is successful for altering the font size but not for the background color. Here is my CSS code:
.ul01 a,p{
height: 100%;
display: inline-block;
color: white;
text-align: center;
padding: 16px 18px;
text-decoration: none;
}
.companyName{
float: left;
}
.ul01 a{
padding-left: 30px;
padding-right: 30px;
width: 90px;
float: right;
transition: font 1s, background-color 1s;
}
.ul01 a:hover{
background-color: red;
font-size: 30px;
}
Below is the HTML code I'm using:
<nav id="nav">
<ul class="ul01">
<li><p class="companyName"> Company Name </p></li>
<li><p class="blank"></p></li>
<li><a href="#facebook"> Facebook </a></li>
<li><a href="#Twitter"> Twitter </a></li>
</ul>
This navigation bar design is simple and straightforward.
During my troubleshooting process, I discovered this line of code:
li a:hover:not(.active) {
background-color: darkgray;
}
After removing this particular snippet, everything seems to be functioning correctly. Thank you all for your guidance - I'll be sure to double-check more carefully in the future.