为什么我的按钮不是我告诉它的颜色呢？

Question

我正试着让我的按钮变成红色，2)鼠标悬停时变成绿色。这里是我的

​

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

如你所见，这个按钮既不是红色也不是绿色。请告诉我为什么

Answer 1

瞄准按钮本身

​

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

​

Answer 2

这是一个红色的按钮，在悬停时变成绿色。

​

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

​

Answer 3

css选择器不正确。您只选择divid=“主页按钮”，而不影响要更改的按钮。您的css选择器应该是#home-按钮和#home-按钮:悬停。