悬停div触发rocket图片旋转失效，部分div无效果求排查

希望实现鼠标悬停（hover）页面中各个div元素时，让id为rocket的图片执行对应的旋转或位移变换，但当前编写的CSS代码使用:active伪类，且仅对前4个div（W、NE、N、SE）生效，后4个div（S、SW、E、NW）无法触发预期效果，请求排查原因。

HTML代码 #

<section id="space">
    <div id="falcon">
        <div id="w" class="directors"><p>&raquo;</p></div>
        <div id="ne" class="directors"><p>&raquo;</p></div>
        <div id="n" class="directors"><p>&raquo;</p></div>
        <div id="se" class="directors"><p>&raquo;</p></div>
        <div id="s" class="directors"><p>&raquo;</p></div>
        <div id="sw" class="directors"><p>&raquo;</p></div>
        <div id="e" class="directors"><p>&raquo;</p></div>
        <div id="nw" class="directors"><p>&raquo;</p></div>
        <img id="rocket" src="C:\Users\USER\OneDrive\Documents\Foundation booster\CSS\imgs\rock.png" alt="rocket">
    </div>
</section>

CSS代码（原错误代码） #

#w:active ~ div:nth-of-type(9) ~ #rocket {
    transform: rotate(-0.25turn);
}

#ne:active ~ div:nth-of-type(8) ~ #rocket {
    transform: rotate(0.125turn);
}

#n:active ~ div:nth-of-type(7) ~ #rocket {
    transform: translatey(-30px);
}

#se:active ~ div:nth-of-type(6) ~ #rocket {
    transform: rotate(0.375turn);
}

#s:active ~ div:nth-of-type(5) ~ #rocket {
    transform: rotate(0.5turn);
}

#sw:active ~ div:nth-of-type(4) ~ #rocket {
    transform: rotate(-0.375turn);
}

#e:active ~ div:nth-of-type(3) ~ #rocket {
    transform: rotate(0.25turn);
}

#nw:active ~ div:nth-of-type(2) ~ #rocket {
    transform: rotate(-0.125turn);
}

问题原因 #

• 伪类使用错误：:active仅在元素被鼠标按下（按住不松手）时触发，和你需要的鼠标悬停效果不符，应该用:hover伪类。
• 兄弟选择器逻辑错误：CSS的~是后续兄弟选择器，只能选中当前元素之后的同级元素。后4个div（S、SW、E、NW）的位置在rocket图片的前面，所以#s:active ~ ... ~ #rocket这类选择器无法匹配到rocket；前4个div刚好在rocket前面，所以选择器偶然生效，但逻辑完全错误。

修复方案 #

1. 替换伪类并修正选择器 #

直接使用父容器下的子元素hover关联，不需要复杂的兄弟选择器嵌套：

/* 给rocket添加平滑过渡（可选，让变换更自然） */
#rocket {
    transition: transform 0.3s ease;
}

/* W方向悬停效果 */
#falcon #w:hover ~ #rocket {
    transform: rotate(-0.25turn);
}
/* NE方向悬停效果 */
#falcon #ne:hover ~ #rocket {
    transform: rotate(0.125turn);
}
/* N方向悬停效果 */
#falcon #n:hover ~ #rocket {
    transform: translateY(-30px);
}
/* SE方向悬停效果 */
#falcon #se:hover ~ #rocket {
    transform: rotate(0.375turn);
}
/* S方向悬停效果 */
#falcon #s:hover ~ #rocket {
    transform: rotate(0.5turn);
}
/* SW方向悬停效果 */
#falcon #sw:hover ~ #rocket {
    transform: rotate(-0.375turn);
}
/* E方向悬停效果 */
#falcon #e:hover ~ #rocket {
    transform: rotate(0.25turn);
}
/* NW方向悬停效果 */
#falcon #nw:hover ~ #rocket {
    transform: rotate(-0.125turn);
}

原理说明 #

所有directors div和rocket都是#falcon的直接子元素，使用~后续兄弟选择器时，只要目标元素（rocket）在触发元素（各个方向div）的后面，就能正确匹配——你当前的HTML结构中rocket在所有div之后，所以所有方向div的~ #rocket都能正确选中目标，再配合:hover伪类就能实现悬停触发变换的效果。

内容的提问来源于stack exchange，提问作者Akash Welgama