Question

我想要在悬停时使html按钮颜色变暗。

我正在使用的代码如下：

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

Answer 1

<强>解释

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

＆＃13;

.test:hover {
    background: #000000;
}

＆＃13;

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

＆＃13;

Answer 2

试试这部分代码：

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

Answer 3

尝试这样的事情，

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

Answer 4

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

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

       <input type="button"  /> 

 </body>
</html>

Answer 5

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>

Answer 6

您可以为div元素提供一个类，并在标记中的样式标记中添加一些样式。这是按钮的完整HTML代码，悬停时稍微变暗

＆＃13;

<!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>

＆＃13;

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

6 个答案: