gpt4 book ai didi

jquery - 修改:after pseudo-element using jQuery的CSS

转载 作者:太空狗 更新时间:2023-10-29 12:35:07 26 4
gpt4 key购买 nike

<分区>

我使用 :after在 block 后显示装饰(三 Angular 形)的伪元素(在我的例子中是 <li>)。思路是区分当前选中的li来自他人。

Fiddle here

html如下:

<ul>
<li class="active" style="background-color: hsl(108, 60%, 50%)">One</li>
<li style="background-color: hsl(36, 60%, 50%)">Two</li>
<li style="background-color: hsl(252, 60%, 50%)">Three<li>
</ul>

和CSS:

ul li {
width: 300px;
height: 30px;
border: 1px dashed;
position: relative;
}

li.active::after {
content: " 0020";
display: block;
font-size: 0px;
position: absolute;
left:100%;
top: 0%;
width: 0px;
height: 0px;
background: transparent;
border: 17px solid transparent;
border-left-color: #FF3900;
}

我想更改 border-left-color li.active::after 的样式属性匹配 background-color 的伪元素的 <li>带有 class=active 的元素.

我想出了以下 jquery:

$("ul li").click(function() {
$("ul li").removeClass("active");
$(this).addClass("active");
$("li.active::after").css('border-left-color', $(this).css('background-color'));
});

这没有按预期工作。感谢您的帮助。

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com