使用css id设置悬停背景颜色为按钮

Question

你好我试图在我的页面上使用它的id悬停我的按钮时改变背景颜色，我尝试使用id

#optinforms-form5-button:hover{
  background-color: white;
  color: black; /* SET COLOR IN BLACK */
}

我也试过这个

input[type="submit"]:hover {
  background-color: white;
  color: black;
}

但似乎没有任何效果，这是按钮的屏幕截图和指向此按钮的页面的链接

在此页面“http://theclosingcode.com/home/

请有人帮忙。

Answer 1

#optinforms-form5-button:hover {
    background: white!important;
    color: black!important;
}

Answer 2

背景的CSS是内联的，所以一个简单的选择器不会起作用。你必须删除内联的css并放入你的css文件或在背景颜色后使用！important。

Answer 3

你提到的元素具有内联样式，它比你编写的任何css具有更高的特异性。我不重要，因为它不可维护和不良做法。

我的建议是从元素中删除内联样式并将其作为一个整体从CSS传递。通过这种方式，您可以获得1个参考点并调试代码。

如果无法做到这一点，那么important!似乎是摆脱它的唯一途径。

Answer 4

使用：hover选择器可以在将鼠标移到按钮上时更改按钮的样式。

提示：使用transition-duration属性确定“悬停”效果的速度：

实施例

.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;}

.button:hover {
background-color: #4CAF50; /* Green */
color: white;}

Answer 5

在separeted CSS文件上写：

1. #optinforms-form5-button{ background-color: #current_color; color: #current_color; }

2. #optinforms-form5-button:hover{ background-color: white; color: black; /* SET COLOR IN BLACK */ }

重要提示：正如此处所建议的那样，只有在HTML文件中删除内联样式后才能生效：

<input type="submit" name="submit" id="optinforms-form5-button" value="GET YOUR FREE TRAINING" style="font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#49d0d6">

我强烈建议您分发CSS和HTML