悬停效果在css中没有响应答案

【问题标题】：Hover effect not responding in css悬停效果在css中没有响应
【发布时间】：2021-02-19 12:36:19
【问题描述】：

您好，有人可以帮我解决.todo-button:hover 中的悬停效果吗？我尝试了很多版本，但似乎没有任何效果我的意思是浏览器的零响应:( .todo-button 的构造似乎有什么错误

* {
  box-sizing: flex-box;
  margin: 0;
  padding: 0;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}

.todo-button {
  width: 100px;
  padding: 16px;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  outline: none;
  background: linear-gradient( 90deg, rgba(93, 12, 255, 1) 0%, rgba(155, 0, 250, 1) 100%);
  color: #fff;
  text-transform: capitalize;
}

.todo-button:hover {
  background-color: #3e8e41;
}

【问题讨论】：

请提供一个最小的可重现代码 sn-p (ctrl + m) 直接在问题中显示问题。将其减少到最小也是确定问题以进行调试的第一步。

标签： html css hover

【解决方案1】：

在您的课程中，您使用属性background 覆盖属性background-color，即使它用于悬停类。只需将悬停类更改为：

.todo-button:hover {
  background: #3e8e41;
}

【讨论】：

【解决方案2】：

请试试这个代码

* {
  box-sizing: flex-box;
  margin: 0;
  padding: 0;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}

.todo-button {
  width: 100px;
  padding: 16px;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  outline: none;
  background: linear-gradient( 90deg, rgba(93, 12, 255, 1) 0%, rgba(155, 0, 250, 1) 100%);
  color: #fff;
  text-transform: capitalize;
}


.todo-button:hover
{
    background: #3e8e41;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        
    </style>
    <title>Document</title>
</head>
<body>
    <button name="btn" class="todo-button">submit

    </button>
</body>
</html>

【讨论】：