html - 将鼠标悬停在同一父项内的不同类上时是否可以显示一个类?

标签 html css hover

<分区>

当我将鼠标悬停在带有 class="fas fa-bars"的元素上时,我想让“.navbar-drop”可见(显示: block )。

不工作:

.navbar-drop {
    display: none;
}
.navbar i:hover .navbar-drop {
    display: block;
}

这是html:

 <div class="navbar">
        <div class="navbar-drop">
            <ul>
                <li><a href="#" class="home">Home</a></li>
                <li><a href="#" class="about-me">About Me</a></li>
                <li><a href="#" class="my-projects">My Projects</a></li>
                <li><a href="#" class="contact-me">Contact Me</a></li>
            </ul>
        </div>
        <i class="fas fa-bars"></i>
    </div>

如果这是重复的,我深表歉意,但我已经搜索了将近半小时的答案,但找不到任何我能理解的内容。

最佳答案

你不能选择父元素,你需要遵守css选择器的规则。 对于这种情况,正确的是:

.navbar:hover .navbar-drop {
    display: block;
}

也就是说,将鼠标悬停在 .navbar 标记中时,您将在子项中设置显示 block 。.navar-drop,不可能选择父元素或其他元素使用 css 选择器规则是不可能的

关于html - 将鼠标悬停在同一父项内的不同类上时是否可以显示一个类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54748309/

上一篇:html - 图像叠加在背景上以自动调整大小以适应移动设备上的大小

下一篇:css - 媒体查询覆盖方向纵向

相关文章:

html - 如何纠正 div、 float 和边框对齐问题

css - 如何在 css3 中使用悬停在另一个 div 上来制作 div 动画?

javascript - jQuery 悬停处理函数在动态添加类后无法在悬停上工作

html - 使用HTML5shiv需要注意哪些问题?

jquery - 随页面滚动的提交按钮

javascript - 如何刷新/重新加载应用程序/pdf 的嵌入?

html - CSS 中的响应式单选按钮

css - SVG 笔划破折号数组 CSS 动画反转类(class)?

javascript - Firefox 中奇怪的选择框行为

css - css如何重置:hover to default state?