CSS 鼠标悬停按钮改变文本颜色

Question

设置元素的悬停效果非常容易。但是我想要的是，当用户悬停在一个带有文本内容的按钮上时，同时使按钮从黑色变为白色，文本从白色变为黑色，而不是两个单独的元素。我应该怎么做呢？

谢谢！

#signUpBox {
    width: 150px;
    height: 47px;
    border-style: solid;
    border-width: 1px;
    margin: auto;
    margin-top: 25px;
    border-radius: 2px;
}

#signUpBox:hover {
    background-color: #ffffff;
}

h3 {
    text-align: center;
    margin-top: -35px;
    letter-spacing: 1px;
    font-size: 17px;
}

- user2605157

---

在五分钟内，你得到了5个几乎相同的答案...看起来你知道该怎么做了！ :-) - Phlume

Answer 1

我不确定你的代码设置方式，但这将适用于带有onclick功能的div作为按钮：

#signUpBox {
    width: 150px;
    height: 47px;
    border: solid 1px #000;
    margin: auto;
    margin-top: 25px;
    border-radius: 2px;
    color:#000;
    background:#fff;

}

#signUpBox:hover {
    background: #000;
    color:#fff;
}

HTML:

<div id="signUpBox">This is a test</div>

DEMO

- Phlume

---

这个 div 是问题所在！谢谢！我会在6分钟内回答。我得等一下。 - user2605157

Answer 2

#signUpBox:hover {
    background-color: #ffffff;
    color:#000000;
}

- Joe

Answer 3

你可以做到

#signUpBox:hover h3 {
  color: #000;
}

JSFIDDLE

- jmore009

Answer 4

鼠标悬停时使用color属性更改文本颜色。

#signUpBox:hover {
    background-color: black;
    color: white;
}

这是一个演示：demo.

- immayankmodi

---

如果颜色不是黑色，那么什么也看不见。 - Joe

@Joseph：请查看我的演示fiddle。 - immayankmodi

Answer 5

#signUpBox {
    width: 150px;
    height: 47px;
    border-style: solid;
    border-width: 1px;
    margin: auto;
    margin-top: 25px;
    border-radius: 2px;
    background: #000000;
    color: #FFFFFF;
}

#signUpBox:hover {
    background: #ffffff;
    color: #000000;
    cursor: pointer;
}

小提琴

- Karuppiah RK