CSS类活跃

Question

我在使用CSS和jQuery时遇到了小问题。我有2个按钮，我想将单击的背景设置为蓝色，并且要使用“活动的” css属性来执行此操作。由于某种原因，它不起作用。只要按钮不再处于活动状态，它就会失去背景色。这是代码： HTML：

<div id = 'hey'>
  <div class = 'b' id = 'b1' href="#">Button one</div>
    <div class = 'b' id = 'b2' href="#">Button Two</div>
</div>

CSS：

body,html { 
  font: bold 14px/1.4 'Open Sans', arial, sans-serif;
  background: #000;
}
#hey { 
  margin: 150px auto 0; 
  padding: 0; 
  list-style: none; 
  display: table;
  width: 600px;
  text-align: center;
}

.b {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;

  display: inline-block;
  padding: 15px 20px;
  position: relative;
}
.b:active {
  background-color: blue;
}

JS：

  $(".b").click(function() {
    $(this).addClass('active');
  });

Answer 1

:active是一个伪类，表示“正在被激活”（通常在鼠标按钮被按下的同时）。

您要给它一个 class active，因此您需要使用 class选择器：.active（带有.不是:）。

---

我建议不要使用与伪类名称匹配的类名称，因为这很容易引起混淆。

Answer 2

:active是伪元素，您正在尝试将active添加为类。所以CSS应该是

.b.active {
  background-color: blue;
}