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>

CodePudding user response：

There are a few problems here:

1. 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.
2. 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.

CodePudding user response：

I think this should be it..

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

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

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