如何在使用外部 div 悬停状态时更改内部 div 内的文本颜色

Question

当您将文本或图标悬停在其中一个更改时，我希望它们在悬停在按钮内时更改颜色，这是由我放在按钮内以存储文本的 div 引起的，无论如何要使用该按钮作为触发器使用 .button-wrapper 作为 :hover 触发器同时更改内部的所有 div 颜色

>>> df.values[x, np.searchsorted(df.columns, y)]
array([1, 8])

/* Nav-Bar */
.nav-bar-wrapper {
    display: flex;
    z-index: 0;
    position: absolute;
    padding: 5px;
}

.button-wrapper {
    margin: 5px;
}

.button-wrapper > button{
    display: flex;
    margin: 0px;
    padding: 0px;
    align-items: center;
    background-color: rgba(0,0,0,0.5);
    border: none;
    outline: none;
}

.button-wrapper > button > .icon-wrapper , .button-text{
    color: orange;
    padding: 5px;
}

.button-wrapper > button:hover , .icon-wrapper:hover>i , .button-text:hover {
    color: white;
    background-color: black;
    transition: ease-in-out 0.5s;
}

.button-wrapper:hover , button:hover , .icon-wrapper:hover , .button-text:hover {
    color: whitesmoke;
    background-color: black;
    transition: ease-in-out 0.5s;
}

.button-wrapper > button > .button-text{
    height: 100%;
    font-weight: bold;

}