CSS懸停文本使用按鈕更改顏色

因此，爲元素設置懸停效果非常簡單。但是我想要的是，當用戶將鼠標懸停在包含文本的按鈕上時，可以使按鈕同時從黑色變爲白色，並使文本從白色變爲黑色。而不是兩個單獨的元素。我應該怎麼做？CSS懸停文本使用按鈕更改顏色

謝謝！

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

來源

2014-01-24 user2605157

......五分鐘後你有5幾乎相同的答案......好像你知道該怎麼辦！ :-) – Phlume

我不知道你是如何的代碼設置，但這會在一個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

來源

2014-01-24 04:53:00 Phlume

div是問題！謝謝！我會在6分鐘內回答這個問題。我不得不等待。 – user2605157

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

來源

2014-01-24 04:50:35 joe

你可以使用懸停color財產

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

JSFIDDLE

來源

2014-01-24 04:50:47 jmore009

改變文字顏色。

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

這裏是一個demo.

來源

2014-01-24 04:51:13

顏色將變爲黑色，否則不會顯示任何內容。 – joe

@Joseph：看我的演示小提琴。 –

是的。現在它的工作好兄弟。 :) – joe

#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

來源

2014-01-24 04:51:48 Karuppiah

CSS懸停文本使用按鈕更改顏色

回答

相關問題