为什么我的元素在悬停时不会更改样式？

Question

我知道其他人也有类似的问题，但是他们的解决方案不起作用。 以下原因是什么？

div.line_container:hover #sidebar_loader1 {
z-index: 2;
}

上面的代码确实更改了z-index。

div:hover #sidebar_loader1 {
z-index: 2;
}

但是这个确实。

这是什么原因，因为我需要知道，因为悬停更改样式时只需要该类。 请帮忙。

我的HTML代码

<img src="" alt="image" id="logo">

<div class="line_container">
    <img src="http://png.findicons.com/files/icons/1580/devine_icons_part_2/128/png.png" alt="IMAGE" class="line_image">
    <span class="line_text">
        THIS IS SOME SAMPLE TEXT >
    </span>
</div>

<div class="sidebar_loader" id="sidebar_loader1">
    TEST for 1
</div>

<div class="line_container">
    <img src="http://png.findicons.com/files/icons/1580/devine_icons_part_2/128/png.png" alt="IMAGE" class="line_image">
    <span class="line_text">
        THIS IS SOME SAMPLE TEXT >
    </span>
</div>

<div class="sidebar_loader" id="sidebar_loader2">
    TEST for 2
</div>

<div class="line_container">
    <img src="http://png.findicons.com/files/icons/1580/devine_icons_part_2/128/png.png" alt="IMAGE" class="line_image">
    <span class="line_text">
        THIS IS SOME SAMPLE TEXT >
    </span>
</div>

<div class="sidebar_loader" id="sidebar_loader3">
    TEST for 3
</div>

</div>

Answer 1

#sidebar_loader_1 不是 div.line_container的后代，因此使用后代组合器（空格）是不正确的。

尝试同级组合器。 +或~应该都可以。

Answer 2

ID为sidebar_loader1的div不嵌套在任何具有line_container类的line_container