CSS：悬停选择器无法在按钮上工作

Question

我正在尝试使按钮具有淡入淡出效果（更改边框和文本颜色），但悬停选择器无法正常工作。我已尝试修复此问题一个小时，但无济于事。

body {
  margin: 0;
  background-image: url("https://www.ecopetit.cat/wpic/mpic/1-16867_preview-wallpaper-new-york-usa-night-skyscrapers-new.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #999;
}

html {
  width: 100%;
  height: 100%;
}

.fadebutton {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  border: 2px solid;
  border-color: white;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: border-color 0.3s ease-out;
}

.fadebutton:hover,
.fadebutton:active {
  color: #66d8ed;
  border-color: #66d8ed;
  transition: border-color 0.4s ease-in;
}

<script defer src="script.js"></script>

<a class="fadebutton" href="www.google.com">Change color</a>

Answer 1

您只需要更改正文的背景颜色即可显示您的按钮悬停选择器工作正常它只是颜色问题！尝试此代码并更改它以满足您的需要，希望对您有所帮助。

   body {
  margin: 0;
 background-color:black;
  background-size: cover;
  background-repeat: no-repeat;
}

html {
  width: 100%;
  height: 100%;
}
.fadebutton {
  display: inline-block;
  width: 200px;
  padding: 8px;
  background-color:white;
  color: black;
  border: 2px solid;
  border-color: white;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: border-color 0.3s ease-out;
}

.fadebutton:hover,
.fadebutton:active {
  color: #66d8ed;
  border-color: #66d8ed;
  transition: border-color 0.4s ease-in;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kell</title>
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
</head>
<body>
<a class="fadebutton" href="www.google.com">Change color</a>
</body>
</html>

Answer 2

如果您希望按钮的文本也淡化颜色，那么您也可以向该属性添加过渡效果。所以不只是

transition: border-color 0.4s ease-in;

您还可以拥有：

transition: border-color 0.4s ease-in;
transition: color 0.4s ease-in;

参见下面的演示：

body {
  margin: 0;
  background-image: url("https://www.ecopetit.cat/wpic/mpic/1-16867_preview-wallpaper-new-york-usa-night-skyscrapers-new.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #999;
}

html {
  width: 100%;
  height: 100%;
}

.fadebutton {
  display: inline-block;
  width: 200px;
  padding: 8px;
  color: #fff;
  border: 2px solid;
  border-color: white;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: border-color 0.4s ease-out;  
  transition: color 0.4s ease-out;
}

.fadebutton:hover{
  color: #66d8ed;  
  border-color: #66d8ed;
  transition: border-color 0.4s ease-in;
}

.fadebutton:hover *{
  transition: color 0.4s ease-in;
}

<script defer src="script.js"></script>

<a class="fadebutton" href="www.google.com">Change color</a>

Answer 3

我会在 .fadebutton class 处声明全部转换，然后在 .fadebutton:hover,.fadebutton:active 上我会声明我想要进行的更改，例如如下所示。

    .fadebutton {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid;
border-color: white;
text-align: center;
outline: none;
text-decoration: none;
transition: all 0.3s ease-in;
}

.fadebutton:hover,
.fadebutton:active {
color: #66d8ed;
border-color: #66d8ed;
}

如果您希望 2 个属性表现不同，我会像这样独立指定转换。

       .fadebutton {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid;
border-color: white;
text-align: center;
outline: none;
text-decoration: none;
transition: color 0.3s ease-in;
transition: border-color 0.3s ease-out;
}

.fadebutton:hover,
.fadebutton:active {
color: #66d8ed;
border-color: #66d8ed;
}

CSS：悬停选择器无法在按钮上工作

CSS :hover selector not working on a button

html

css

hover