CSS 伪类 :hover 和 :active 不起作用答案

【问题标题】：CSS pseudo classes :hover and :active not workingCSS 伪类 :hover 和 :active 不起作用
【发布时间】：2017-03-24 13:35:33
【问题描述】：

所以我想尝试制作一个游戏，但我马上遇到了 CSS 问题。正如您可以通过问题看出的那样，我尝试使用的伪类不起作用。如果您想查看我的代码，它就在这里。

Fiddle

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 时扩展和收缩边框，这样看起来更像是在按下实际按钮。

【问题讨论】：

您的 css 中有语法错误。删除括号后的;
csslint.net
感谢您的链接，我会确保从现在开始使用它:)

标签： html css pseudo-class

【解决方案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>

【讨论】：

感谢您帮助我。我现在有点尴尬
是的，由于某种原因，我尝试这样做，但它会耽误我的时间，但我会确保在允许的时候这样做