爲什麼我的按鈕不是我說的那種顏色？

我試圖讓我的按鈕1）變成紅色，並且2）在懸停/鼠標懸停時變成綠色。 這裏是我的HTML：爲什麼我的按鈕不是我說的那種顏色？

<div id="home-button"> <button type="button" style="height: 100px; width: 400px; font-size: 45px; font-family: 'Josefin Sans', sans-serif; border-radius:20px" href='/'> HOME </button> </div>

HOME

這裏是我的CSS：

#home-button { 
    text-align: center; 
    padding:10px; 
    color: red; 
} 

#home-button:hover { 
    background-color: green; 
}

正如你所看到的，按鈕既不是紅色也不綠色。請告訴我爲什麼

來源

2015-07-21 Sydney Penny

目標按鈕本身

#home-button button{ 
 
    text-align: center; 
 
    padding:10px; 
 
    color: red; 
 
} 
 

 
#home-button:hover button{ 
 
    background-color: green; 
 
}

<div id="home-button"> <button type="button" style="height: 100px; width: 400px; font-size: 45px; font-family: 'Josefin Sans', sans-serif; border-radius:20px" href='/'> HOME </button> </div>

來源

2015-07-21 21:05:41 AmmarCSE

非常感謝您的幫助和快速響應！ –

@SydneyPenny，很高興幫助:) – AmmarCSE

這裏是一個按鈕，這就是紅變綠懸停。

<style> 
 
#home-button { 
 
    text-align: center; 
 
    padding:10px; 
 
} 
 

 
#home-button button { 
 
background-color: red; 
 
} 
 

 
#home-button button:hover { 
 
background-color: green; 
 
} 
 
</style> 
 

 
<div id="home-button"> <button type="button" style="height: 100px; width: 400px; font-size: 45px; font-family: 'Josefin Sans', sans-serif; border-radius:20px" href='/'> HOME </button> </div>

來源

2015-07-21 21:05:53 Samuel

CSS選擇不正確。您只選擇了div [id =「home-button」]並且不會影響您想要更改的按鈕。你的CSS選擇器應該是＃home-button按鈕和＃home-button按鈕：hover。

來源

2015-07-21 21:29:38

非常感謝！ –

爲什麼我的按鈕不是我說的那種顏色？

回答

相關問題