Question

我试图使我的按钮1）变红，2）在悬停/鼠标悬停时变为绿色。 这是我的HTML：

＆＃13;

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

＆＃13;

家

这是我的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选择器不正确。您只选择div [id =＆＃34; home-button＆＃34;]而不影响您想要更改的按钮。你的css选择器应该是#home-button按钮和#home-button按钮：hover。

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

3 个答案: