如何动态使用 CSS 在循环中反转 position

Question

我有一个显示 16 个框的循环，当悬停时，它将显示一个弹出框。 我已经使用定位弹出框

position:absolute; left:200px;

在相对容器内。 我的问题是如何将盒子的每 3 个和 4 个更改为

left: -200px;

循环样本

   <div class="wrap">
  <div class="box_container">

    <div id="box_loop_ID1"> </div>
    <div id=" box_loop_hover_ID1"> </div>

    <div id="box_loop_ID2"> </div>
    <div id=" box_loop_hover_ID2"> </div>

    <div id="box_loop_ID3"> </div>
    <div id=" box_loop_hover_ID3"> </div>

    <div id="box_loop_ID4"> </div>
    <div id=" box_loop_hover_ID4"> </div>

  </div>
</div>