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伪类：悬停和：活动不起作用

1 个答案: