Question

我在html中有一个提交按钮，当我将鼠标悬停在其上时，我想更改颜色，但是由于某种原因，它不会更改颜色，我的css和html都在下面

.submit:hover {
    background: #CF4647;;
}

<td colspan="2" style="text-align:center" >
	 <br /><br />
	  <input type="submit" class="submit" value=" Send " style="width:200px;height:40px;background-color:#44c767;border-radius:25%;">
	  <br /><br />

Answer 1

请确保避免使用内嵌样式（style='xyz';），因为它们会被优先使用，并且会覆盖所有没有!important标志的其他样式（例如，悬停）。这是代码的编写方式。作为奖励，我在按钮上添加了淡入淡出的过渡，并根据您在评论中的要求将光标更改为手形指针：）

.submit{ width:200px; height:40px; background-color:#44c767; border-radius:25%; cursor:pointer; transition:background 300ms; }
.submit:hover {
    background: #CF4647;
}

<td colspan="2" style="text-align:center" >
	 <br /><br />
	  <input type="submit" class="submit" value="Send">
	  <br /><br />
</td>

Answer 2

您有错别字，将.sumbit更改为.submit，而且内联样式的优先级更高，因此请将其移到外部

.submit:hover {
    background-color: #CF4647;
}
.submit {
    background-color: #44c767;
    cursor: pointer;
}

<td colspan="2" style="text-align:center" >
	 <br /><br />
	  <input type="submit" class="submit" value=" Send " style="width:200px;height:40px;border-radius:25%;">
	  <br /><br />

Answer 3

实际的原因是您的代码无法正常工作（除了您原来的错字）是因为您的内联样式覆盖了CSS规则。只需删除内联样式并使其像其他CSS一样成为规则：

.submit:hover {
  background: #CF4647;
}

.submit {
  width: 200px;
  height: 40px;
  background-color: #44c767;
  border-radius: 25%;
}

<input type="submit" class="submit" value=" Send ">

这与CSS specificity有关。正如MDN所说：

已添加到元素的内嵌样式（例如，style =“ font-weight：bold”）总是覆盖外部样式表中的任何样式，因此可以被认为具有最高的特异性。

提交按钮不会在悬停时更改颜色

3 个答案: