CSS 伪类 :hover 和 :active 不工作

Question

所以我想尝试制作游戏，但我运行马上就遇到了 CSS 问题。正如您从问题中看出的那样，我尝试使用的伪类不起作用。如果你想看我的代码，就在这里。

CSS

#button {
    width: 200px;
    height: 100px;
    border-radius: 20px;
    background-color: orange;
    cursor: pointer;
    margin: auto;
    margin-top: 250px;
    border: 1px solid black;
    text-align: center;
    font-size: 1.3em;
    color: blue;
};

#button:hover {
    border: 3px solid black;
};

#button:active {
    border: 2px solid black;
};

HTML

<body>
    <div id="button">
        <p>
            Click here to get some money!
        </p>
    </div>
</body>

基本上我想做的就是在用户点击 div 时扩展和收缩边框，这样看起来更像是他们按下了一个实际的按钮。

Answer 1

删除不必要的分号;

#button {
  width: 200px;
  height: 100px;
  border-radius: 20px;
  background-color: orange;
  cursor: pointer;
  margin: auto;
  margin-top: 250px;
  border: 1px solid black;
  text-align: center;
  font-size: 1.3em;
  color: blue;
}

#button:hover {
  border: 3px solid black;
}

#button:active {
  border: 2px solid black;
}

<div id="button">
  <p>
    Click here to get some money!
  </p>
</div>

CSS 伪类 :hover 和 :active 不工作

CSS pseudo classes :hover and :active not working

html

css

pseudo-class

CSS 伪 类 :hover 和 :active 不工作

CSS pseudo classes :hover and :active not working

html

css

pseudo-class

CSS 伪类 :hover 和 :active 不工作