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

mzillmmw 于 2023-04-08 发布在其他

关注(0)|答案(1)|浏览(102)

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

<style>

#span_logout {
display: none;
}

</style>

这个span有一个名为“span_logout”的id，它被放入名为“sidebar”的class中，并且在页面加载开始时被隐藏。我想在侧边栏悬停时显示span，但我尝试了几种方法，我没有找到任何解决方案。
我试着添加这个作为例子，但我没有设法解决这个问题：

<style>

#span_logout {
display: none;
}

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

</style>

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

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>