Question

嗨我现在有我的网站中的类别列表，现在是一个不活跃的类别，它的不透明度将会更少，而选择该文本的那个将是黑暗的。如果我给出不选择列表的不透明度我是无法看到存在的文本和所有文本。所以我只需要删除未选择的不透明度，并应为所选的一个添加更多亮度。项目列表有不同的颜色。

＆＃13;

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");
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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's，因此您的CSS代码中不需要#tribe-events。

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

Answer 2

无需在css代码中添加#tribe-events。删除它并尝试

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

Answer 3

因此，从您粘贴的代码中，我可以理解，您正在减少非活动元素的不透明度。

如果要删除未选择项目的不透明度，请增加opacity: 1;。

要突出显示所选项目，请对所选项目使用不同的background-color 。

.active{
    background-color : //something-differ-than-non-active
}
#legend li:not(.active) {
    opacity: 1;
}

或在悬停时动态添加亮度

$(".active li").hover(
    function () {
        //OnHover 
        $(this).css("background-color", LightenDarkenColor(rgb2hex($(this).css("background-color")), 20));
    }, function () {
        //AfterHover
        $(this).css("background-color", LightenDarkenColor(rgb2hex($(this).css("background-color")), -20));
    });

Answer 4

这可能对你有所帮助

＆＃13;

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(".active").removeClass("active");
  jQuery(this).toggleClass("active");
  });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 5

而不透明度，你可以试试滤镜css的亮度（）。

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

filter CSS属性可让您将模糊或色移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

＆＃13;

/* demo using the tabindex attribute to catch focus event on li*/
li:focus {filter:brightness(200%)}


/* demo makup */
ul {counter-reset:li}
li:before {  counter-increment:li; content:'This item number 'counter(li);}
li {background:gray;color:purple}
li:nth-child(3n) {background:green;color:tomato}
li:nth-child(2n-2) {background:turquoise;color:crimson}

＆＃13;

<ul><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li></ul>

＆＃13;

＆＃13; 或者是增加和减少的混合brightness()

＆＃13;

/* demo using the tabindex attribute to catch focus event on li*/

li:not(:focus) {filter:brightness(50%)}
li:focus {filter:brightness(150%)}


/* demo makup */
ul {counter-reset:li}
li:before {  counter-increment:li; content:'This item number 'counter(li);}
li {background:gray;color:purple}
li:nth-child(3n) {background:green;color:tomato}
li:nth-child(2n-2) {background:turquoise;color:crimson}

＆＃13;

<ul><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li><li tabindex="0"></li></ul>

＆＃13;

https://css-tricks.com/almanac/properties/f/filter/

CSS滤镜是一种功能强大的工具，作者可以使用它来实现不同的视觉效果（有点像浏览器的Photoshop滤镜）。 CSS过滤器属性可在元素显示之前访问元素渲染上的模糊或色移等效果。过滤器通常用于调整图像，背景或边框的渲染。

语法为：
.filter-me {
  filter: <filter-function> [<filter-function>]* | none
}

如果使用css处于活动状态，则更改背景颜色更亮

5 个答案: