为什么我的按钮不是我说的那种颜色？

我试图让我的按钮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

非常感谢！ –

为什么我的按钮不是我说的那种颜色？

回答

相关问题