Html 使用按钮更改颜色的 CSS 悬停文本

CSS Hover Text Changing Color With Button

提问by user2605157

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

回答by Phlume

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

我不确定您是如何设置代码的，但这可以在带有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:

HTML：

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

DEMO

演示

回答by Roo

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

回答by jmore009

you can do

你可以做

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

JSFIDDLE

JSFIDDLE

回答by immayankmodi

change text color using colorproperty on hover.

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

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

Here is a demo.

这是一个演示。

回答by Karuppiah RK

#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

小提琴