css 如何使按钮在单击时更改颜色，然后在单击其他按钮时变回其原始颜色？

wko9yo5t 于 2022-11-19 发布在其他

关注(0)|答案(3)|浏览(387)

我有两个按钮，我希望当我单击其中一个按钮时，背景色会改变颜色，然后当我单击另一个按钮时，背景色会变回原来的颜色。我还希望有一个悬停功能，可以显示按钮的颜色，如果单击按钮时具有一定的不透明度。
我试过了

button:hover{
   background-color: pink;
   opacity: .5;
}

button:focus{
   background-color: pink;
}

这工作正常，直到我点击屏幕上的任何地方，颜色变化消失了。
我也试过

var buttons = $('button');
buttons.click(function() {
  buttons.css('background-color', 'snow');
  $(this).css('background-color', 'pink');
});

这也很好用，除了悬停效果像我想要的那样停止工作。当我悬停在一个按钮上时，你可以看到不透明度的变化，但它不再是粉红色的。
有没有办法调整这些尝试中的任何一个，使其正常工作？提前感谢

3条答案

问题是您的代码覆盖了background-color属性。将!important添加到您的.button:hover，它将按您预期的方式工作。代码片段如下：
第一个

正如我所说，使用单选按钮... [edit]与2版本获得值事件JS或jQuery
第一个

您只需要将focus伪类添加到按钮，只要按钮聚焦，颜色就会保持不变，如果您单击按钮的任何位置，按钮的颜色就会丢失

.my-button:{
background-color:black;
}

.my-button:focus{
background-color:white;
}