css - 如何使悬停在非相邻元素或子元素上工作

Question

当用户将鼠标悬停在另一个 div 上时，我试图让一个 div 改变它的位置。触发移动的 div 不是将要移动的 div 的父级或相邻级。这可以用 css 完成还是我需要去 js？

代码如下:

.container{
  display: inline-block;
}

.redOnTop{
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 0.5;
}

.smallBlueBehind{
    display: inline-block;
    position: relative;
    left: -55px;
    width: 50px;
    height: 100px;
    background: blue;
    transition: 1s;
    z-index: -10;
}

#redLeft:hover + #blueLeft{
    transition: 1s;
    left: -5px;
}

#showingArea{
    display: inline-block;
    position: relative;
    //overflow: hidden;
    width: 50px;
    height: 100px;
    left: -5px;
    border: 1px solid black;
}

//------------------------------ HOW TO WRITE HERE!
#redRight:hover #blueRight{
    transition: 1s;
    left: 0px;
}

<div class="container">
    <div class="redOnTop" id="redLeft">
    </div>
    <div class="smallBlueBehind" id="blueLeft">
    </div>
</div>

<div class="container">
    <div class="redOnTop" id="redRight">
    </div>

    <div id="showingArea">
        <div class="smallBlueBehind" id="blueRight">
        </div>
    </div>
</div>

如您所见，当鼠标悬停在红色方 block 上时，我希望右侧的蓝色方 block 从红色方 block 下方滑出并最终落入黑边框中。和左边的一样..唯一的区别是我想把它放在黑盒子里。

Here is a codepen if someone likes that better.

如有任何建议，我们将不胜感激!谢谢。

Answer 1

您可以使用相邻选择器然后定位蓝色矩形...

#redRight:hover + #showingArea #blueRight{
    transition: 1s;
    left: 0px;
}

.container {
  display: inline-block;
}
.redOnTop {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 0.5;
}
.smallBlueBehind {
  display: inline-block;
  position: relative;
  left: -55px;
  width: 50px;
  height: 100px;
  background: blue;
  transition: 1s;
  z-index: -10;
}
#redLeft:hover + #blueLeft {
  transition: 1s;
  left: -5px;
}
#showingArea {
  display: inline-block;
  position: relative;
  //overflow: hidden;
  width: 50px;
  height: 100px;
  left: -5px;
  border: 1px solid black;
}
#redRight:hover + #showingArea #blueRight {
  transition: 1s;
  left: 0px;
}

<div class="container">
  <div class="redOnTop" id="redLeft">
  </div>
  <div class="smallBlueBehind" id="blueLeft">
  </div>
</div>

<div class="container">
  <div class="redOnTop" id="redRight">
  </div>

  <div id="showingArea">
    <div class="smallBlueBehind" id="blueRight">
    </div>
  </div>
</div>

codepen