html - 一般 sibling 不能悬停

Question

为什么一般 sibling 不能在悬停上工作？我尝试了所有方法，甚至尝试让它使用 jQuery 但 jQuery 中的 CSS 我不知道如何设置过渡持续时间

.filter h5,
.filter span {
    color: #808391;
    cursor: pointer;
}
.work div.current h5,
.work div.current span {
    cursor: auto;
}    
.filter h5:hover
.filter span:hover + h5,
.work div.current h5{
    color: #fff;
}  

/* general sibling here not work */
.filter span:hover,
.filter h5:hover ~ .et,
.work div.current span {
    color: #ed4040;
}

<div class="col-6 col-md-3">
    <div class="current filter" filter=".brainstorming">
        <span class="icon-genius et"></span>
        <h5>Brainstorming</h5>
    </div>
</div>

Answer 1

您可以尝试将鼠标悬停在父级上，只选择类 .et 进行更改。

.filter h5,
.filter span {
    color: #808391;
    cursor: pointer;
}
.work div.current h5,
.work div.current span {
    cursor: auto;
}    
.filter h5:hover
.filter span:hover + h5,
.work div.current h5{
    color: #fff;
}  

/* general sibling here not work */
.filter:hover > span.et{
    color: #ed4040;
    transition: all .5s;
}

<div class="col-6 col-md-3">
    <div class="current filter" filter=".brainstorming">
        <span class="icon-genius et">colorschange</span>
        <h5>Brainstorming</h5>
    </div>
</div>