gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 04:05:18 26 4
gpt4 key购买 nike

所以我想尝试制作一款游戏,但我马上就遇到了 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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com