如何在悬停时影响div之外的元素

Question

我正试图让一个子菜单出现在我将要悬停的元素div之外。我尝试了多种方法来完成这项工作，但到目前为止我运气不佳。出于设计目的，子菜单需要位于链接div之外。

让它发挥作用的最佳方法是什么？

.header {
display: flex;
padding: 20px 0;
}
.nav {
max-width: 1100;
width: 100%;
margin: auto;
}
.nav a {
margin: 0 35px 0 0;
color: #333333;
transition: 0.5s ease;
}
#sub-menu {
position: relative;
width: 100%;
background: #333;
height: 150px;
display: none;
margin-top: 20px;
max-width: 100%;
}
.three:hover #sub-menu {
display: block
}

<div class="header">
<div class="nav">
<a class="one" href="#">Home</a>
<a class="two" href="#">About</a>
<a class="three" href="#">Services</a>
<a class="four" href="#">Contact</a>
</div>
<div id="sub-menu"></div>

Answer 1

这种行为不能仅靠css实现，您需要一些JS代码。原因如下：为了缓解这种情况，CSS提供了3个选择器

将样式更改应用于div的子级+将样式更改应用于父div的直属子项~将样式更改应用于父div 的以下所有子项

但没有办法使用这些选择器直接修改两级以上的div(祖父母：p)。。。所以你可能需要一些JS希望我正确回答了这个问题

参考https://techbrij.com/css-selector-adjacent-child-sibling