我在尝试定位 men 中的下一个元素时遇到问题。
假设我们有这样的结构:
<ul>
<li class="active">
<a href=""><i class=""></i></a>
</li>
<li>
<a href=""><i class=""></i></a>
</li>
</ul>
我的目标是为每个“i”或当前事件 li 旁边的元素提供动画。
我还需要更改其颜色,或添加闪烁效果以帮助用户了解他们可以单击该元素。这是因为它是一个图标,也许他们看不到它...
我尝试了什么:
我尝试在 css 中使用 +、~,在 jquery 中使用 .next()、nextAll() 等。
编辑: 下面给出的示例与此处显示的简单结构配合得很好,非常感谢您的帮助。
但是对于 bootstrap 4 选项卡,事件类位于元素中,因此结构变为
<ul>
<li>
<a href="" class="active"><i class=""></i></a>
</li>
<li>
<a href=""><i class=""></i></a>
</li>
</ul>
对于这种新结构,无论我尝试什么,我都无法更改颜色或为事件类之后的动画设置动画...(第二个 li)
最佳答案
我想你正在寻找这个:
li.active ~ li > a {
color:red;
}
li.active ~ li > a >i {
color:green;
}
<ul>
<li><a href=""><i class="">icon</i>link</a></li>
<li class="active"><a href=""><i class="">icon</i>link active</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
</ul>
或者可能是这样:
li.active + li > a {
color:red;
}
li.active + li > a >i {
color:green;
}
<ul>
<li><a href=""><i class="">icon</i>link</a></li>
<li class="active"><a href=""><i class="">icon</i>link active</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
<li><a href=""><i class="">icon</i>link</a></li>
</ul>
关于jquery - 我如何定位 jquery 或 css 中的下一个或同级元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49070486/