0

当光标悬停在按钮上时，我正在尝试更改表单提交按钮的颜色，但我不确定为什么代码不起作用。

我尝试了不同版本的代码，包括：

form.form p.submit input a:hover { background-color:E8E8E8;

和 form.form p.submit input:hover { background-color:E8E8E8;

<style type="text/css"> 
form.form input.text, form.form textarea.standard, form.form select, form.form input.date { 
   background-color:#FFFFFF;
   border:solid 1px #00BCF1;
   font-size:16px;
   color:#000000;
   width:550px;
   -moz-border-radius:px;
   -webkit-border-radius:px;
   border-radius:15px;
   padding-top:5px;
   padding-bottom:5px;
   padding-left:5px;
   padding-right:5px;
}
form.form p label {
   font-size:14px;
   color:#FFFFFF;
   font-weight:normal;
   padding-top:15px;
   padding-bottom:5px;
}
form.form p.submit input {
   background-color:#B2D235;
   border:solid 1px #00BCF1;
   font-size:16px;
   color:#003c71;
   font-weight:bold;
   padding-top:15px;
   padding-bottom:15px;
   padding-right:25px;
   padding-left:25px;
   -moz-border-radius:0px;
   -webkit-border-radius:0px;
   border-radius:30px;

}

form.form p.submit input a:hover {
    background-color:E8E8E8;
}
form.form p.submit {
   margin-top:40px;
   margin-bottom:0px;
   text-align:left;
}
form.form p.required label, form.form span.required label {
    background:none !important; 
    font-weight:bold;
}
form.form p.required label.field-label:after {
    content:"*"; 
    color: #FFFFFF; 
}

 </style>

我想让按钮改变颜色，但我似乎无法做到这一点。

4

3 回答 3

1

我立即注意到的一件事是您没有在十六进制代码前添加“#”。所以它应该看起来像这样

form.form p.submit input a:hover {
    background-color:#E8E8E8
}

除此之外，查看关联的 HTML 可能会有所帮助

于 2019-07-25T13:47:15.270 回答
0

顺便说一句，您在颜色代码之前缺少# color:#E8E8E8

form.form p.submit input a:hover { background-color:E8E8E8;

您可以在链接中找到答案：https ://www.w3schools.com/css/css3_buttons.asp

于 2019-07-25T13:50:08.840 回答
0

你可以试试这个


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.btn {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 16px 32px;
  text-align: center;
  font-size: 16px;
  margin: 4px 2px;
  transition: 0.3s;
}

.btn:hover {
  background-color: #3e8e41;
  color: white;
}
</style>
</head>
<body>

<h2>Fading Buttons - "Fade in Effect"</h2>

<button class="btn">Hover Over Me</button>

</body>
</html>
于 2019-07-25T13:45:27.423 回答