hover非父级div时，能否将span设置为右对齐？

尝试在hover非span父级的div元素时，将对应的span设置为右对齐，请问这是否可行？

页面结构如下：

<section  id="section1">
    <div class="aboutusdiv" id="div1"></div>
    <span></span>
    <div class="aboutusdiv" id="div2"></div>
    <span></span>
    <div class="aboutusdiv" id="div3"></div>
    <span></span>
    <div class="aboutusdiv" id="div4"></div>
    <span></span>
    <div class="aboutusdiv" id="div5"></div>
    <span></span>
    <div class="aboutusdiv" id="div6"></div>
    <span></span>
</section>

编写的CSS样式代码如下：

#section1 span {
  width: 300px;
  height: 300px;
  background-color: blue;
  position: relative;
  transition:all 0.5s ease-in-out 0.1s;
}

#section1 div:hover span {
  transform: translate(60%);  
  width: 500px; 
}

可行，但你当前的CSS代码存在问题：#section1 div:hover span这个选择器会选中#section1下所有的span元素，而不是hover的div对应的那一个相邻span。

要实现hover某个div时，仅让它后面紧跟的span右对齐，需要使用相邻兄弟选择器+，它只会选中目标元素的下一个相邻兄弟元素。修改后的CSS代码如下：

#section1 span {
  width: 300px;
  height: 300px;
  background-color: blue;
  position: relative;
  transition: all 0.5s ease-in-out 0.1s;
  display: block; /* span默认是行内元素，设置宽高需转为块级/行内块 */
}

#section1 div:hover + span {
  transform: translateX(calc(100vw - 500px)); /* 根据布局调整偏移值实现右对齐 */
  width: 500px;
}

补充说明： #

• 行内元素span默认无法设置宽高，需添加display: block或display: inline-block让样式生效。
• 若要精准右对齐，可根据父容器宽度调整偏移值，比如父容器固定宽度为1200px，可改为calc(1200px - 500px)。
• 相邻兄弟选择器+刚好匹配你页面中div与对应span的紧邻关系，能准确触发目标元素的样式变化。

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