css - 如果悬停子组件的元素，则使元素不可见

Question

具有以下 App.component.ts

<app-title-bar></app-title-bar>
<app-navigation-bar></app-navigation-bar>
<div id="app-content">
     ...
</div>

如果 app-navigation-bar 的元素，我如何将属性 visibility: hidden 应用到元素 #app-content悬停了吗？

如果组件合并为一个组件，我可以简单地做

#nav-bar:hover #app-content{
  visibility: hidden;
}

不幸的是，组件样式隔离和封装阻止了它。使用 :host 或 :host-context 的任何解决方案？我仍然认为这些功能不合适..

Answer 1

您可以像这样使用直接兄弟 (+) 或一般兄弟 (~) 选择器:

#nav-bar:hover + #app-content {
  display: none;
}

此处演示:https://codepen.io/malejpstros/pen/VwZaeRO
更多关于这里的选择器:https://www.w3schools.com/css/css_combinators.asp