So right now self teaching myself so html and CSS and I have a slight problem. In my menu bar I have some list items that I want to change color when the mouse hovers over the box, but I'm unsure how to do that. Right now I have:
#Menu li:hover{
background-color: rgba(255,165,0,0.5)
}
#Menu li a:hover{
color: black;
}
But this makes it where when I hover over the text it changes and only the box changes. I tried:
#Menu li:hover{
background-color: rgba(255,165,0,0.5)
color: black;
}
but that does nothing except change the box color. Also having a gradual change instead of an abrupt change would be nice as well.
#Menu {
height: 40px;
background-color: rgb(255,165,0);
}
#Menu ul{
margin:auto;
padding:0;
}
#Menu li {
list-style-type: none;
float: left;
display: block;
width:20%;
height:40px;
text-align: center;
line-height:40px;
font-family: inherit;
font-size:16px;
}
#Menu li a{
text-decoration: none;
color:white;
position: fixed;
}
#Menu li:hover {
background-color: #FFB733;
}
#Menu li a:hover {
color: black;
}<html>
<head>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<div id="Menu">
<ul>
<li><a href="#">Cat</a></li>
<li><a href="#">Dog</a></li>
<li><a href="#">Mouse</a></li>
</ul>
</div>
</body>
</html>
