如何实现点击按钮后保留hover样式并切换按钮时更新样式？

你之前的写法有两个核心问题：

1. 直接移除所有按钮的class会丢失按钮原本的基础样式；
2. :hover是CSS伪类，无法通过addClass直接添加到元素的class属性中，浏览器不会识别这种写法。

正确的做法是新增一个专门的active类，复用hover状态的样式，再通过JS控制这个类的添加和移除：

1. 修改CSS样式 #

把hover状态的样式同时应用到active类上，这样点击后的按钮就能保持和hover时一样的效果：

/* 保留原hover样式，同时添加active类的样式 */
.bookly-hour:hover, .bookly-hour.active {
  border-color: orange;
  /* 这里补充你hover时设置的其他样式，比如背景色、文字色等 */
}

2. 修改JavaScript代码 #

不需要移除原有的bookly-hour类，只需要管理active类的切换：

$(".bookly-hour").on('click', function(event){ 
    // 先移除所有按钮的active类
    $(".bookly-hour").removeClass("active");
    // 给当前点击的按钮添加active类
    $(this).addClass("active");
});

这样点击按钮后，该按钮会一直保持hover样式；点击其他按钮时，前一个按钮的active类会被移除，样式恢复，当前按钮则会应用active样式。

内容的提问来源于stack exchange，提问作者Engi