Is it possible to align a span to left when hovering a div which is not the parent?

I tried aligning my span to the right when i hover a div, which is not a parent of the span. Is this possible?? i have a section in which there are 6 divs and 6 spans.

<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>

#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; 
}

>Solution :

You can do it. In my example I’m using the + operator in the selector and you can test it by hovering on a.

#section1 span {
  background-color: yellow;
  position: relative;
  transition:all 0.5s ease-in-out 0.1s;
}

#section1 span:hover + span {
  transform: translate(60%);  
  width: 500px; 
  color: red;
  float: right;
}

<div id="section1">
    <span>a</span>
    <span>b</span>
</div>