如何更改悬停时 div 的文本颜色

Question

我正在尝试编写一个button当您将鼠标悬停在它上面/单击它时会改变颜色的代码。但是，我遇到了一个问题。文本和该div部分的边缘之间有一个空格，如果将鼠标悬停在 上button，它会变成黑色，但文本不会变成白色。我放color:white;。我不确定为什么这不能解决问题。

这是我的代码：

p {
    margin: 0px;
}


.button {

    width: 66px;
    height: 20px;
    border: 2px black solid;
    border-radius: 4px;
    padding: 5px;

}

.button:hover {

    background-color: black;
    color: white;
}

a {

    color: black;
    text-decoration: none;   
}

a:hover {

    color: white;  
}

<div class="button">
    <p> <a href="https://www.google.com">  Click Me! </a> </p>
</div>

Answer 1

只要改变你的a:hover一切.button:hover a 都会看起来很棒。:>

p {
        margin: 0px;
    }
    
    .button {
        width: 66px;
        height: 20px;
        border: 2px black solid;
        border-radius: 4px;
        padding: 5px;
    }
    
    .button:hover {
        background-color: black;
        color: white;
    }
    
    a {
        color: black;
        text-decoration: none;
    }
    .button:hover a{
        color: white;
    }

<div class="button">

        <p> <a href="https://www.google.com">  Click Me! </a> </p>


    </div>