当侧边栏悬停时，是否有任何方法可以将样式应用于#id 选择器？

Question

我是 CSS 的新手，我对我的 CSS 样式有疑问。我有一个看起来像这样的代码：

<style>

#span_logout {
display: none;
}

</style>

这个跨度有一个名为“span_logout”的

id

被放入一个名为“侧边栏”的

class

并且它在页面加载开始时隐藏在加载中。我想在侧边栏悬停时显示跨度，但我尝试了几种方法，但没有找到任何解决方案。

我尝试添加这个作为示例，但我没有设法解决问题：

<style>

#span_logout {
display: none;
}


.sidebar-hovered #span_logout {
display: block !important;
}

</style>

当侧边栏悬停时，有什么方法可以将样式应用到#id 选择器中吗？

Answer 1

你不能将鼠标悬停在

display: none

和/或没有

visibility

的东西上。你应该这样做：

.sidebar-hovered span {
    visibility: hidden;
}
.sidebar-hovered:hover span {
    visibility: visible;
}

Hover: <span id="span_logout" class="sidebar-hovered"><span>Content here</span></span>