jquery - 如果使用 css 处于事件状态，则将背景颜色更改得更亮

Question

您好，到目前为止，我的网站上有类别列表，未激活的类别的不透明度会降低，而选择该文本的类别将变暗。如果我为未选择的列表提供不透明度，我是无法看到存在的文本和所有文本。所以我只需要删除未选中的不透明度，并为选中的添加更多亮度。元素列表有不同的颜色。

jQuery(document).ready(function() {
  jQuery(".tribe-events-category-5").addClass("active");
  jQuery(".tribe-events-category-5").trigger("click");
  jQuery("#legend li").on("click", function() {
    jQuery(this).toggleClass("active");
  });
});

#tribe-events #legend li:not(.active) {
  opacity: 0.3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="legend">
  <li><span>All</span></li>
  <li class="tribe-events-category-5"><span>Music</span></li>
  <li><span>Dance</span></li>
  <li><span>Festives</span></li>
</ul>

Answer 1

像下面这样更改 CSS 代码:-

#legend li:not(.active) {
  opacity: 0.3;
}

查看工作示例:-

jQuery(document).ready(function() {
  jQuery(".tribe-events-category-5").addClass("active");
  jQuery(".tribe-events-category-5").trigger("click");
  jQuery("#legend li").on("click", function() {
    jQuery("#legend li").removeClass('active');
    jQuery(this).addClass("active");
  });
});

#legend li:not(.active) {
  opacity: 0.3;
}

.active {
  font-size:20px;
  font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="legend">
  <li><span>All</span></li>
  <li class="tribe-events-category-5"><span>Music</span></li>
  <li><span>Dance</span></li>
  <li><span>Festives</span></li>
</ul>

注意:-

#tribe-events 是 legend 的子元素，因此您的代码 CSS 根本不起作用。

此外，#legend li 将检查所有 li 的，因此您的 CSS 代码中根本不需要 #tribe-events .

您可以使用 font-size 和 font-weight 属性使所选文本看起来更粗更亮