如何选择当前元素以应用悬停效果?没有继承

How to select current element to apply hover effect? not inherited

本文关键字：悬停 应用 继承 元素 何选择 选择      更新时间：2023-09-26

我想选择确切的元素来应用悬停效果。但不是继承的。

<div class="parent">
    <div class="child"> <-- not here
        <div class="parent">
            <div class="child"></div> <-- apply hover effect
        </div>
    </div>
</div>

只有CSS可以实现吗？如果仅仅通过CSS是不可能的，你可以给我idea angularjs指令。目标是我想创建一个可重用、可缩放的angularjs指令或CSS类。

谢谢。

编辑结构更加清晰。

<div class="custom-scroller">
    <div class="custom-scrollbar"> <-- not here
        <dynamic-multi-layer-elements>
            ... <-- lots of dynamic number of elements here
            <div class="custom-scroller"> <-- it might be many times nested
                <div class="custom-scrollbar"></div> <-- apply hover effect
            </div>
            ... <-- lots of elements closed
        </dynamic-multi-layer-elements>
    </div>
</div>

你可以这样做：

.parent > .child > .parent > .child:hover
{
    color: red;
}

.parent .parent > .child:hover
{
color:green;
}

你可以像那样做

相关文章：