cannot make :hover in nav-CodePudding

I'm trying to male that when you hover a "home" it will be a different color. Could someone please help me? Thank you!

<header class = "header">
   <nav >
     <div >
          <div  id="navbarSupportedContent">
              <ul >
                 <li >
                     <a  href="#" style="color:#b38b40;">Home</a>
                 </li>
              </ul>
          </div>
     </div>

CodePudding user response：

You need to move your inline style="" attributes to a separate stylesheet .css or <style> element because you cannot define :hover rules in inline style="" attributes and inline styles takes precedence over rules from a stylesheet.

header.header > nav ul > li > a {
    color: #b38b40;
}
header.header > nav ul > li > a:hover {
    color: red;
}

<header class = "header">
   <nav >
     <div >
          <div  id="navbarSupportedContent">
              <ul >
                 <li >
                     <a  href="#">Home</a>
                 </li>
                 <li >
                     <a  href="#">Away</a>
                 </li>
                 <li >
                     <a  href="#">Life</a>
                 </li>
                 <li >
                     <a  href="#">Is Short</a>
                 </li>
                 <li >
                     <a  href="#">And Love</a>
                 </li>
                 <li >
                     <a  href="#">Is Always Over</a>
                 </li>
                 <li >
                     <a  href="#">In the Morning</a>
                 </li>
              </ul>
          </div>
     </div>

CodePudding user response：

You have 3 options,

create a new file - only for css, and put a link to the File from the HTML page.
write in the right row, style = "your style".
On the HTML page, write the label style