CSS元素hover相互影响问题：#btnC可作用#btnB但反向失效求解

我是一名新手网页设计师，目前遇到一个棘手的技术问题：在我的CSS代码中，#btnC:hover能够影响#btnB的样式，但#btnB:hover无法对#btnC产生作用。我尝试使用了~、+、后代选择器、子选择器等多种CSS组合选择器，均未达到预期效果，希望了解CSS中元素hover相互影响的详细原理，并获得针对性的解决帮助。

以下是我的代码：

<style>
    .countainer{
        width: 500px;
        
    }
    .box{
        height: 100%;
    }
    
    #btnC{
        display: inline-block;
        text-align: center;
        position: absolute;
        background-color: #009fdf;
        border-radius: 50px;
        margin-left: 205px;
        margin-top:550px;
        text-decoration: none;
        color:#F2F2F2;
        transition: 0.8s;
    }
    
    #btnB{
        display: inline-block;
        text-align: center;
        position: absolute;
        background-color: #ffcc00;
        border-radius: 50px;
        margin-left: 380px;
        margin-top:550px;
        text-decoration: none;
        color:#53565A;
        transition: 0.8s;
    }
    #btnC div, #btnB div {
        width:150px;
        padding: 20px 0;
    }
    
#btnC:hover {
        transform: scale(1.2);
        background-color:#ffffff;
        color:#009fdf;
        transition: 0.8s;
    }
    #btnC:hover ~ #btnB {
        margin-left: 400px;
    }
    
    #btnB:hover{
        transform: scale(1.2);
        background-color:#ffffff;
        color:#ffcc00;
        transition: 0.8s;
    }
    
    #btnB:hover  #btnC {
        margin-left: 195px;
    }
    
</style>

<div class="countainer">
    <div class="box">
            <a id="btnC" href="#"><div>Individual</div></a>

            <a id="btnB" href="#"><div>Team</div></a>
        <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a8687897-418c-40db-b92b-af479b5b1cb6/d5cyk3x-ee5a53c6-240b-400a-8ee6-64e0ac9bd4ed.jpg/v1/fill/w_900,h_360,q_75,strp/background_2012_by_davicinpuntocom-d5cyk3x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwic3ViIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl0sIm9iaiI6W1t7InBhdGgiOiIvZi9hODY4Nzg5Ny00MThjLTQwZGItYjkyYi1hZjQ3OWI1YjFjYjYvZDVjeWszeC1lZTVhNTNjNi0yNDBiLTQwMGEtOGVlNi02NGUwYWM5YmQ0ZWQuanBnIiwid2lkdGgiOiI8PTkwMCIsImhlaWdodCI6Ijw9MzYwIn1dXX0.jLqQ7mUnFBNhVh_NpAO5plPheYvTtzQ0JvZ_8gLr5sY" width="1700px" alt="">
    </div>
</div>

核心原理：CSS选择器的单向性 #

CSS选择器是单向遍历DOM树的：只能从父元素选到子元素，或者从前面的同级元素选到后面的同级元素，完全无法反向选择前置的同级元素或父元素。

• 你用的#btnC:hover ~ #btnB能生效，是因为~是后续同级选择器，它可以选中当前元素之后的所有同级元素，而#btnC确实在#btnB的前面，所以hover btnC时能选中后面的btnB。
• 而#btnB:hover #btnC是后代选择器，它只会选中btnB内部的btnC元素，显然你的DOM结构里btnC和btnB是同级关系，不是后代；就算改成#btnB:hover ~ #btnC也没用，因为btnC在btnB前面，~只能选后面的元素，反向不成立。

两种解决方法 #

方法1：调整HTML元素顺序（纯CSS方案） #

把#btnB放在#btnC前面，这样就能用~选择器让btnB的hover影响btnC，同时保持初始位置不变：

<style>
    .countainer{
        width: 500px;
    }
    .box{
        height: 100%;
    }
    
    #btnB{
        display: inline-block;
        text-align: center;
        position: absolute;
        background-color: #ffcc00;
        border-radius: 50px;
        margin-left: 380px;
        margin-top:550px;
        text-decoration: none;
        color:#53565A;
        transition: 0.8s;
    }
    
    #btnC{
        display: inline-block;
        text-align: center;
        position: absolute;
        background-color: #009fdf;
        border-radius: 50px;
        margin-left: 205px;
        margin-top:550px;
        text-decoration: none;
        color:#F2F2F2;
        transition: 0.8s;
    }
    
    #btnC div, #btnB div {
        width:150px;
        padding: 20px 0;
    }
    
    #btnC:hover {
        transform: scale(1.2);
        background-color:#ffffff;
        color:#009fdf;
        transition: 0.8s;
    }
    #btnC:hover ~ #btnB {
        margin-left: 400px;
    }
    
    #btnB:hover{
        transform: scale(1.2);
        background-color:#ffffff;
        color:#ffcc00;
        transition: 0.8s;
    }
    /* 现在btnB在前面，用~可以选中后面的btnC */
    #btnB:hover ~ #btnC {
        margin-left: 195px;
    }
</style>

<div class="countainer">
    <div class="box">
        <!-- 调换元素顺序 -->
        <a id="btnB" href="#"><div>Team</div></a>
        <a id="btnC" href="#"><div>Individual</div></a>
        <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a8687897-418c-40db-b92b-af479b5b1cb6/d5cyk3x-ee5a53c6-240b-400a-8ee6-64e0ac9bd4ed.jpg/v1/fill/w_900,h_360,q_75,strp/background_2012_by_davicinpuntocom-d5cyk3x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwic3ViIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl0sIm9iaiI6W1t7InBhdGgiOiIvZi9hODY4Nzg5Ny00MThjLTQwZGItYjkyYi1hZjQ3OWI1YjFjYjYvZDVjeWszeC1lZTVhNTNjNi0yNDBiLTQwMGEtOGVlNi02NGUwYWM5YmQ0ZWQuanBnIiwid2lkdGgiOiI8PTkwMCIsImhlaWdodCI6Ijw9MzYwIn1dXX0.jLqQ7mUnFBNhVh_NpAO5plPheYvTtzQ0JvZ_8gLr5sY" width="1700px" alt="">
    </div>
</div>

方法2：使用JavaScript（无需修改DOM结构） #

如果不想调整元素顺序，用JS监听hover事件手动控制另一个元素的样式：

<style>
    .countainer{
        width: 500px;
    }
    .box{
        height: 100%;
    }
    
    #btnC{
        display: inline-block;
        text-align: center;
        position: absolute;
        background-color: #009fdf;
        border-radius: 50px;
        margin-left: 205px;
        margin-top:550px;
        text-decoration: none;
        color:#F2F2F2;
        transition: 0.8s;
    }
    
    #btnB{
        display: inline-block;
        text-align: center;
        position: absolute;
        background-color: #ffcc00;
        border-radius: 50px;
        margin-left: 380px;
        margin-top:550px;
        text-decoration: none;
        color:#53565A;
        transition: 0.8s;
    }
    #btnC div, #btnB div {
        width:150px;
        padding: 20px 0;
    }
    
    #btnC:hover {
        transform: scale(1.2);
        background-color:#ffffff;
        color:#009fdf;
        transition: 0.8s;
    }
    #btnC:hover ~ #btnB {
        margin-left: 400px;
    }
    
    #btnB:hover{
        transform: scale(1.2);
        background-color:#ffffff;
        color:#ffcc00;
        transition: 0.8s;
    }
    /* 新增类用于btnC的hover联动样式 */
    .btnC-hover {
        margin-left: 195px;
    }
</style>

<div class="countainer">
    <div class="box">
            <a id="btnC" href="#"><div>Individual</div></a>
            <a id="btnB" href="#"><div>Team</div></a>
        <img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a8687897-418c-40db-b92b-af479b5b1cb6/d5cyk3x-ee5a53c6-240b-400a-8ee6-64e0ac9bd4ed.jpg/v1/fill/w_900,h_360,q_75,strp/background_2012_by_davicinpuntocom-d5cyk3x.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwic3ViIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl0sIm9iaiI6W1t7InBhdGgiOiIvZi9hODY4Nzg5Ny00MThjLTQwZGItYjkyYi1hZjQ3OWI1YjFjYjYvZDVjeWszeC1lZTVhNTNjNi0yNDBiLTQwMGEtOGVlNi02NGUwYWM5YmQ0ZWQuanBnIiwid2lkdGgiOiI8PTkwMCIsImhlaWdodCI6Ijw9MzYwIn1dXX0.jLqQ7mUnFBNhVh_NpAO5plPheYvTtzQ0JvZ_8gLr5sY" width="1700px" alt="">
    </div>
</div>

<script>
    const btnB = document.getElementById('btnB');
    const btnC = document.getElementById('btnC');
    
    // 监听btnB的hover进入事件
    btnB.addEventListener('mouseenter', () => {
        btnC.classList.add('btnC-hover');
    });
    
    // 监听btnB的hover离开事件
    btnB.addEventListener('mouseleave', () => {
        btnC.classList.remove('btnC-hover');
    });
</script>

内容的提问来源于stack exchange，提问作者Omar Al-Washmy - عمر الوشمي