CSS 按钮悬停效果不适用于 id

Question

我没有任何内联样式。由于我是自学者，给您带来的不便，我深表歉意，这是我的第一个问题。

非常感谢您的支持。

#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>

Answer 1

这里有几个问题：

1. 您已在锚点 (<a>) 内放置了 <input>。请注意interactive elements are not permitted children of the anchor element。你可以想象如果是这样的问题——浏览器将如何确定你打算与哪个元素交互——锚点，还是它包含的按钮？如果你想要一个看起来像按钮的锚点，你可以简单地使用 CSS 来适当地设置它的样式。格式错误的 HTML 可能会导致奇怪且难以调试的问题，因此我建议您解决此问题。
2. 即使使用格式不正确的 HTML，您的样式也不会像您在此处设置的那样完全正确地匹配。您有一个包含<input> 的<a>，但选择器#submit a:hover 读取为“定位一个悬停的<a>，它位于inside 的id 为#submit 的元素中”。因此，该规则与实际情况相反。您可以通过多种方式重写它以使其匹配；这是一个：

#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>

...但是，我建议您不要单独使用此解决方案，而是清理您的 HTML 并从坚实的基础开始。

Answer 2

我觉得应该是这样的..

#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>