Question

给出一个按钮

<button href="#" class="search  no-style search-active" style="display: inline-block;">
 <div class="pointer" style="display:none">::after</div>
</button>

当触发时，伪:after类需要切换一个类search-active，为按钮设置背景颜色

.primary .search:after,
.primary .search[data-search="disabled"]:after {
  color: #fff;
  content: "\E8B6";
  font-family: "Material Icons";
  position: absolute;
  top: -25px;
  transition: color .3s;
  font-size: 26px;
  margin-left: -10px;
}

//THIS NEEDS TO BE APPLIED TO THE :after PSEUDO CLASS TO SET THE BACKGROUND COLOR OF THE BUTTON
.search-active {
  background-color: purple;
  padding: 12px 33px 19px 35px;
  margin: 0px -30px;
}

我有类似的jquery为另一个按钮工作，但这似乎不适用于这个特定的实例：

$(".search").on("click", function() {
  $(this).toggleClass('search-active');
});

的jsfiddle：https://jsfiddle.net/xk9hx9j9/2/

Answer 1

你的评论删除了这一行＆＃34; //这需要应用于：在PSEUDO CLASS设置按钮的背景颜色之后＆＃34;

切换类的伪类：课后

1 个答案: