CSS button hover effects not working with id's

February 10, 2022

I do not have any inline styling. I am sorry for any inconvenience as I am a self-learner and this is my first question.

Many thanks for your support.

#submit {
  background-color: yellow;
  font-weight: bold;
  font-size: 15px;
  border-width: medium;
}

#submit a:hover {
  background-color: red;
}

<form id="form">
  <label for="email" id="email-label"></label><br>
  <input id="email" type="email" required name="Form-elements" placeholder="Enter your Email Address" /><br><br>
  <a href="https://www.freecodecamp.org/email-submit">
    <input type="submit" id="submit" value="Get Started"></a>

>Solution :

There are a few problems here:

You have put an <input> inside of an anchor (<a>). Please note that interactive elements are not permitted children of the anchor element. You can imagine the issues if it were– how would the browser determine which element you intended to interact with– the anchor, or the button it contains? If you want an anchor that looks like a button, you can simply use CSS to style it appropriately. Malformed HTML can lead to strange, difficult to debug issues, so I suggest you resolve this.
Even with the malformed HTML, your styles are not written quite correctly to match as you have set here. You have a <a> that contains an <input>, but the selector #submit a:hover reads as "target a hovered <a> that is inside of an element with id #submit". So the rule is inverted from the actual case. You could rewrite this a number of ways to make it match; here’s one:

#submit {
  background-color: yellow;
  font-weight: bold;
  font-size: 15px;
  border-width: medium;
}

a:hover #submit {
  background-color: red;
}

<form id="form">
  <label for="email" id="email-label"></label><br>
  <input id="email" type="email" required name="Form-elements" placeholder="Enter your Email Address" /><br><br>
  <a href="https://www.freecodecamp.org/email-submit">
    <input type="submit" id="submit" value="Get Started"></a>

…however, I would recommend that you don’t go with this solution alone, but instead clean up your HTML and start from a solid foundation.