Question

我有一个提交按钮。初始背景色为X。当我将鼠标悬停在按钮上时，背景色更改为Y。一切正常。但是，当我单击按钮时，背景颜色会变回X。我希望它保持Y的颜色。我该怎么办？

#submitStarted {
  border: solid 0px;
  border-radius: 30px;
  color: white;
  background-color: #D94C27;
  font-family: "Open Sans", Arial;
  padding: 14px 30px;
  font-weight: 450;
  font-size: 15px;
}

#submitStarted:hover {
  cursor: pointer;
  background-color: #C92A00;
}

<input id="submitStarted" type="submit" value="Get Started">

Answer 1

这称为焦点状态，还需要向#submitStarted:focus添加#submitStarted:hover和#submitStarted { border: solid 0px; border-radius: 30px; color: white; background-color: #D94C27; font-family: "Open Sans", Arial; padding: 14px 30px; font-weight: 450; font-size: 15px; } #submitStarted:hover, #submitStarted:focus, #submitStarted.active { cursor: pointer; background-color: #C92A00; }来保持与悬停相同的颜色，但是在单击按钮旁边后将其删除。

<input 
id="submitStarted" 
type="submit" 
value="Get Started" 
onclick="this.classList.add('active')">

classes

如果您希望即使移开焦点后仍保持不变，则需要使用JS和一些onclick="this.classList.add('active')"

{{1}}

单击后保持按钮样式

1 个答案: