CSS悬停文本改变颜色与按钮

So, it's pretty easy to set a hover over effect for an element. But what I want is when the user hovers over a button that has text in it, to make the button turn from black to white and the text from white black at the same time. Instead of two separate elements. How should I do this?

因此，为元素设置悬停效果非常容易。但我想要的是，当用户悬停在一个有文本的按钮上时，让按钮从黑色变为白色，同时文本从白色变为黑色。而不是两个分开的元素。我该怎么做呢?

Thanks!

谢谢!

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

5 个解决方案

#1

I'm not sure how you have the code set up but this would work on a div with an onclick function attached as a button:

我不知道你是如何设置代码的，但这将在一个div中工作，它附带一个onclick函数作为一个按钮:

#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

演示

#2

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

#3

you can do

你可以做

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

JSFIDDLE

#4

change text color using color property on hover.

改变文本颜色，使用颜色属性悬停。

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

Here is a demo.

这是一个演示。

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

Fiddle

小提琴

#1