html - CSS 伪类 :hover and :active not working

标签 html css pseudo-class

所以我想尝试制作一款游戏,但我马上就遇到了 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 时扩展和收缩边框,这样看起来更像是他们按下了一个实际的按钮。

最佳答案

删除不必要的分号;

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

关于html - CSS 伪类 :hover and :active not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42992048/

相关文章:

javascript - 不要在表格之间分页

html - 向 li 元素添加其他类

html - 图像未显示和检查元素显示大小为 1x1 像素

javascript - document.querySelectorAll 具有伪类 :hover not working in FF or IE

html - 仅在直接父级悬停时显示 div

javascript - 将 parent 与绝对 child 相匹配? (响应轮播)

javascript - 如何知道底部导航栏在移动 Safari 中何时可见?

html - 限制表格中div的宽度和高度

Asp.NET 4.0 菜单控件 a :active style persisting after mouse released

html - 为什么我的第 nth-of-type 伪类不选择第一个 a,并将其视为第 4 个?