悬停时如何使 HTML 按钮变暗？答案

【问题标题】：How to make HTML button darken when hovered over?悬停时如何使 HTML 按钮变暗？
【发布时间】：2017-09-17 01:27:55
【问题描述】：

我希望在鼠标悬停时使 html 按钮颜色变暗。

我使用的代码如下：

<div style="width: 200px; color: white; background-color: #bf8f42; opacity: 0.8; margin: auto; margin-top: 0px; padding: 20px;">Training</div>

【问题讨论】：

How can I change a button's color on hover?的可能重复
在发布您的问题之前不搜索 SO 现有答案的大量存档，您会浪费自己的时间以及帮助您和管理您的其他人的时间。请练习更好的 SO 公民身份。

标签： html wordpress button

【解决方案1】：

Try this solution:
    .btn-test {
      width: 200px;
      color: white;
      background-color: #bf8f42;
      opacity: 0.8;
      margin: auto;
      margin-top: 0px;
      padding: 20px;
    }

    .btn-test:hover {
      background-color: #a26d19;
    }
 <div class="btn-test">Training</div>

【讨论】：

这行得通，但是我似乎无法增加按钮大小，而且它会向右移动另一个按钮。 @vinod joshi
请编辑您的答案以包含一些解释。纯代码答案对教育未来的 SO 读者几乎没有作用。

【解决方案2】：

说明：

当用户将鼠标悬停在类（测试）上时，它会触发 css 元素 .test:hover。 :hover 是一个锚伪类。您可以通过多种方式使用这些类型的类Shown Here。

.test:hover {
    background: #000000;
}

<div class="test">text</div>

【讨论】：

请编辑您的答案以包含一些解释。仅代码的答案对教育未来的 SO 读者几乎没有作用。您的答案因质量低劣而在审核队列中。
K，会的。但是关于这个问题的所有其他答案也没有解释代码的作用。

【解决方案3】：

试试这部分代码：

<style>
div:hover{
background-color: #000000;
}
</style>

【讨论】：

感谢您的反馈，我会带走的

【解决方案4】：

您可以为您的 div 元素指定一个类，并在标签的样式标签中添加一些样式。这是按钮的完整 HTML 代码，悬停时有点暗

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.btn-training
{
width: 200px; 
color: white; 
background-color: #bf8f42; 
opacity: 0.8; 
margin:0 auto;
padding: 20px;
text-align: center;
}
.btn-training:hover
{
background-color: #9f7f31;
}
</style>
</head>
<body>
<div class="btn-training">Training</div>
</body>
</html>

【讨论】：

请编辑您的答案以包含一些解释。纯代码答案对教育未来的 SO 读者几乎没有作用。

【解决方案5】：

此代码可能会帮助您在悬停时更改颜色

<!DOCTYPE html>
<html>
<head>
<style>
input:hover {
    background-color: yellow;
}
</style>
</head>
<body>

       <input type="button"  /> 

 </body>
</html>

【讨论】：

【解决方案6】：

试试这样的，

div:hover{
  background-color: #000000;
  opacity:1;
}

【讨论】：

请编辑您的答案以包含一些解释。纯代码答案对教育未来的 SO 读者几乎没有作用。