Html CSS：悬停选择器不在按钮上工作

我试图使按钮具有淡入淡出的效果（更改边框和文本颜色），但悬停选择器不起作用。我已经试了一个小时来解决这个问题，但没有用

正文{
保证金：0；
背景图像：url（“https://www.ecopetit.cat/wpic/mpic/1-16867_preview-wallpaper-new-york-usa-night-skyscrapers-new.jpg");
背景尺寸：封面；
背景重复：无重复；
背景色：#999；
}
html{
宽度：100%；
身高：100%；
}
.fadebutton{
显示：内联块；
宽度：200px；
填充：8px；
颜色：#fff；
边框：2倍实心；
边框颜色：白色；
文本对齐：居中；
大纲：无；
文字装饰：无；
过渡：边框颜色0.3s缓和；
}
.fadebutton:悬停，
.fadebutton：激活{
颜色：#66d8ed；
边框颜色：#66d8ed；
过渡：边框颜色为0.4s，易于调整；
}

---

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

正文{
保证金：0；
背景色：黑色；
背景尺寸：封面；
背景重复：无重复；
}
html{
宽度：100%；
身高：100%；
}
.fadebutton{
显示：内联块；
宽度：200px；
填充：8px；
背景色：白色；
颜色：黑色；
边框：2倍实心；
边框颜色：白色；
文本对齐：居中；
大纲：无；
文字装饰：无；
过渡：边框颜色0.3s缓和；
}
.fadebutton:悬停，
.fadebutton：激活{
颜色：#66d8ed；
边框颜色：#66d8ed；
过渡：边框颜色为0.4s，易于调整；
}

凯尔

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

过渡：边框颜色0.4s易入

您还可以拥有：

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

请参见下面的演示：


正文{
保证金：0；
背景图像：url（“https://www.ecopetit.cat/wpic/mpic/1-16867_preview-wallpaper-new-york-usa-night-skyscrapers-new.jpg");
背景尺寸：封面；
背景重复：无重复；
背景色：#999；
}
html{
宽度：100%；
身高：100%；
}
.fadebutton{
显示：内联块；
宽度：200px；
填充：8px；
颜色：#fff；
边框：2倍实心；
边框颜色：白色；
文本对齐：居中；
大纲：无；
文字装饰：无；
过渡：边框颜色0.4s缓出；
过渡：颜色0.4s缓变；
}
.fadebutton：悬停{
颜色：#66d8ed；
边框颜色：#66d8ed；
过渡：边框颜色为0.4s，易于调整；
}
.fadebutton：悬停*{
过渡色：颜色0.4s易入；
}
我只需在.fadebutton类中声明全部转换，然后在.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;
}

如果您希望两个属性的行为不同，我会像这样独立地指定转换

       .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;
}

它的工作方式正是它应该的。我把代码放入一个可执行代码段，它似乎工作正常（从白色变为浅蓝色）-我将添加一个不同的bg颜色，以便链接从开始就可见。确保您导入的样式表没有覆盖您在上面应用的自定义样式。。。