Javascript 在另一个div悬停时隐藏一个div

我正在创建一个侧栏导航。当侧栏（.nav侧栏）在悬停状态下展开时，我希望圆圈（.circle indicator）消失。这可以通过CSS实现，还是需要使用javascript？我该怎么做

这是页面的代码

正文{
利润率：-20px；
}
.导航侧栏{
位置：固定；
宽度：10px；
背景色：#000；
颜色：#fff；
高度：100vh；
填充：100px 20px 0 20px；
空白：nowrap；
}    
.导航侧栏：悬停{
宽度：300px；
过渡时间：1s；
}
.导航侧栏a{
颜色：#fff；
文字装饰：无；
字号：2em；
}
.导航侧栏ul{
列表样式：无；
}
.nav侧栏侧栏链接li{
垫底：1米；
}
.导航侧栏.圆圈指示器{
位置：固定；
左：-33px；
顶部：40vh；
}
.导航侧栏.圆圈指示器ul li{
边缘底部：1米；
显示：块；
边框：1px实心#fff；
边界半径：10px；
宽度：10px；
高度：10px；
填充：0；
}
.导航侧栏.圆圈指示器ul li a:激活{
背景色：#fff；
}

使用

正文{
利润率：-20px；
}
.导航侧栏{
位置：固定；
宽度：10px；
背景色：#000；
颜色：#fff；
高度：100vh；
填充：100px 20px 0 20px；
空白：nowrap；
}    
.导航侧栏：悬停{
宽度：300px；
过渡时间：1s；
}
.导航侧栏a{
颜色：#fff；
文字装饰：无；
字号：2em；
}
.导航侧栏ul{
列表样式：无；
}
.nav侧栏侧栏链接li{
垫底：1米；
}
.导航侧栏.圆圈指示器{
位置：固定；
左：-33px；
顶部：40vh；
}
.导航侧栏.圆圈指示器ul li{
边缘底部：1米；
显示：块；
边框：1px实心#fff；
边界半径：10px；
宽度：10px；
高度：10px；
填充：0；
}
.导航侧栏.圆圈指示器ul li a:激活{
背景色：#fff；
}
.导航侧栏：悬停.圆圈指示器{
显示：无；
}

使用

正文{
利润率：-20px；
}
.导航侧栏{
位置：固定；
宽度：10px；
背景色：#000；
颜色：#fff；
高度：100vh；
填充：100px 20px 0 20px；
空白：nowrap；
}    
.导航侧栏：悬停{
宽度：300px；
过渡时间：1s；
}
.导航侧栏a{
颜色：#fff；
文字装饰：无；
字号：2em；
}
.导航侧栏ul{
列表样式：无；
}
.nav侧栏侧栏链接li{
垫底：1米；
}
.导航侧栏.圆圈指示器{
位置：固定；
左：-33px；
顶部：40vh；
}
.导航侧栏.圆圈指示器ul li{
边缘底部：1米；
显示：块；
边框：1px实心#fff；
边界半径：10px；
宽度：10px；
高度：10px；
填充：0；
}
.导航侧栏.圆圈指示器ul li a:激活{
背景色：#fff；
}
.导航侧栏：悬停.圆圈指示器{
显示：无；
}

这条规则可以做到这一点

.nav-sidebar:hover .circle-indicator {
    display: none;
}

或者有一个过渡

.nav-sidebar:hover .circle-indicator {
    opacity: 0;
    transition: opacity 0.5s;
}

示例代码段

正文{
利润率：-20px；
}
.导航侧栏{
位置：固定；
宽度：10px；
背景色：#000；
颜色：#fff；
高度：100vh；
填充：100px 20px 0 20px；
空白：nowrap；
}    
.导航侧栏：悬停{
宽度：300px；
过渡时间：1s；
}
.导航侧栏：悬停.圆圈指示器{
不透明度：0；
过渡：不透明度0.5s；
}
.导航侧栏a{
颜色：#fff；
文字装饰：无；
字号：2em；
}
.导航侧栏ul{
列表样式：无；
}
.nav侧栏侧栏链接li{
垫底：1米；
}
.导航侧栏.圆圈指示器{
位置：固定；
左：-33px；
顶部：40vh；
}
.导航侧栏.圆圈指示器ul li{
边缘底部：1米；
显示：块；
边框：1px实心#fff；
边界半径：10px；
宽度：10px；
高度：10px；
填充：0；
}
.导航侧栏.圆圈指示器ul li a:激活{
背景色：#fff；
}

这条规则可以做到这一点

.nav-sidebar:hover .circle-indicator {
    display: none;
}

或者有一个过渡

.nav-sidebar:hover .circle-indicator {
    opacity: 0;
    transition: opacity 0.5s;
}

示例代码段

正文{
利润率：-20px；
}
.导航侧栏{
位置：固定；
宽度：10px；
背景色：#000；
颜色：#fff；
高度：100vh；
填充：100px 20px 0 20px；
空白：nowrap；
}    
.导航侧栏：悬停{
宽度：300px；
过渡时间：1s；
}
.导航侧栏：悬停.圆圈指示器{
不透明度：0；
过渡：不透明度0.5s；
}
.导航侧栏a{
颜色：#fff；
文字装饰：无；
字号：2em；
}