我试过-Facebook按钮和谷歌按钮可以像往常一样是黑白的。但是当有人悬停在这些按钮上时，按钮就会改变颜色。

以下是网站链接:https://gxm.ece.myftpupload.com/home/

这是我的代码。但不管用。有人能帮我找出问题吗？

#fb-button {   
            background-image: url('http://gxm.ece.myftpupload.com/wp-content/uploads/2021/10/18-181292_facebook-5-star-reviews-hd-png-download__1_-removebg-preview.png');
    width: 480px;
    height: 200px;
    border: none;
    background-color: #a52a2a00;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;

}


/* the problem is here, just a space, between #fb-button and :hover. See the Spaceholder's answer in this post. */
#fb-button :hover{
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    width: 485px;
    height: 205px;
}

顺晟科技：

您所要做的就是删除空格

#fb-button {   
            background-image: url('http://gxm.ece.myftpupload.com/wp-content/uploads/2021/10/18-181292_facebook-5-star-reviews-hd-png-download__1_-removebg-preview.png');
    width: 480px;
    height: 200px;
    border: none;
    background-color: #a52a2a00;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;

}


/* the problem is here, just a space, between #fb-button and :hover. See the Spaceholder's answer in this post. */
#fb-button :hover{
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    width: 485px;
    height: 205px;
}

和

#fb-button {   
            background-image: url('http://gxm.ece.myftpupload.com/wp-content/uploads/2021/10/18-181292_facebook-5-star-reviews-hd-png-download__1_-removebg-preview.png');
    width: 480px;
    height: 200px;
    border: none;
    background-color: #a52a2a00;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;

}


/* the problem is here, just a space, between #fb-button and :hover. See the Spaceholder's answer in this post. */
#fb-button :hover{
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    width: 485px;
    height: 205px;
}