Question

我正在尝试创建一个简单的按钮，背景颜色和文本颜色都会在悬停时改变颜色。我得到的背景色是，但是当我直接将鼠标悬停在文本上时，文本颜色只会更改颜色。 I have a CodePen on this for an example，这是我使用的代码：

button {
    background: #4e368f;
    color: #ccc;
    padding: 10px 30px;
    margin-top: 0;
    border: 0;;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}
button:hover { background: #5e4999; }
button.go-now { width: 100%; }
button.go-now a { color: #ccc; text-decoration: none; }
button.go-now a:hover { color: #fff; }

<p style="text-align: center;">
    <button class="go-now">
        <a href="#" title="Go" target="_blank">Go Now</a>
   </button>
</p>

Answer 1

您将关闭，只需将鼠标悬停在上方即可更改文本的颜色。现在，当您将锚标签悬停在上方时，锚标签会变为白色。

button:hover .go-now a { color: #fff; }

Answer 2

尝试一下：

        button {
        background: #4e368f;
        color: #ccc;
        padding: 10px 30px;
        margin-top: 0;
        border: 0;;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
    }
    button:hover { background: #5e4999; }
    button.go-now { width: 100%; }
    button.go-now a { color: #ccc; text-decoration: none; }
    button.go-now a:hover { color: #fff; }
    button:hover .test{
	color: #fff;
    }

    <p style="text-align: center;"><button class="go-now"><a href="#" title="Go to Armis Console" class="test" target="_blank">Go Now</a></button></p>

如何更改悬停在按钮上任意位置的按钮的文本颜色，而不仅仅是文本？

2 个答案: