Javascript CSS在上一个div上悬停时移动元素

我正在尝试创建一个使用“网格”的网站，它看起来就像www.uve.info/en/（页面中间，在“服务”下）上的网格，并且在悬停时具有相同的效果

我用“黑细胞”、“灰细胞”和“白细胞”这三个类制作了div，并以同样的方式进行排序。白细胞z指数为负，向左（奇数行）或向右（偶数行）移动33%。这样，它们在灰色或黑色的细胞下保持隐形

在奇数行上很容易获得所需的结果：

.grey-cell:hover + .odd
    visibility: visible
    right: 0

，但当我尝试对偶数行中的白色单元格执行相同操作时，问题就出现了，因为HTML结构不同（白色单元格-黑色单元格-灰色单元格），并且我无法针对上一个div

不幸的是，由于一些对本主题不重要的原因，我无法使用flexbox更改元素的顺序。我尝试过使用jquery函数“insertBefore”，但它改变了HTML结构，在这里没有帮助

---

那么，有没有办法在不使用flexbox的情况下更改元素的顺序，或者使用CSS/SASS将上一个div作为目标？

已经尝试使用上一个同级选择器~

.grey-cell:hover ~ .even{
visibility: visible;
left: 0;
 }

---

请注意代码，它有点脏，请清洗它，但它的工作方式就像你想要的

.盒子
{
宽度：200px；
高度：200px；
背景：rgba（0,0,0120）；
保证金：0自动；
颜色：白色；
}
.大盒子
{
高度：200px；
宽度：600px；
颜色：白色；
位置：绝对位置；
边框：1px纯黑；
z指数：-1；
-webkit转换：所有0.3；
}
.大盒子1
{
顶部：0px；
左：-200px；
文本对齐：右对齐；
}
.大盒子2
{
顶部：200px；
左：200px；
文本对齐：左对齐；
}
.big box>.box
{
显示：内联块；
}
标准杆数
{
位置：相对位置；
高度：400px；
宽度：600px；
保证金：0自动；
边框：1px纯黑；
溢出：可见；
}
.b1:悬停~.big-box1
{
左：0px；
}
.b2:悬停~.big-box2
{
左：0px；
}
一个
两个
奥尼克
TwoC

在您所指的站点中，两种效果的结构似乎是相同的（向左移动&向右移动）

但是，对于“item”和“indent”，它被覆盖在左侧：0。 这样，元素就位于中央块的下方，中央块是第二个用于向右过渡，第一个用于向左移动

因此，当“项目”悬停时，“col hover”位于右侧：

.item:hover col-hover {
  left: 100%;
}

但是，如果具有“item”类的元素也具有“indent”类，那么“col hover”将向左移动：-50%（向左）

因此，您可以保持相同的结构，并使用要移动的元素的绝对位置。 我想您已经注意到了动画“col hover”上的转换，更改了left属性使元素移动

---

希望这有帮助

为了热身，我把这个问题弄得乱七八糟，还没有完全考虑清楚，但我会发布一些信息，以防有帮助

小提琴

css

.blocks-wrapper {
    font-size: 0;
    margin-bottom: 10px;
    position: relative;
    text-align: center;
}

.block {
  display: inline-block;
  height: 200px; width: 200px;
}

.hidey {
  font-size: 15px;
  z-index: -1;
  color: red;
  position: absolute;
  left: 50%;
  top: 50%;  bottom: 50%;
  transition: all 1s ease;
}

.blocks-wrapper:nth-child(odd) .block:nth-child(1) {  }
.blocks-wrapper:nth-child(odd) .block:nth-child(2) { background-color: #222; }
.blocks-wrapper:nth-child(odd) .block:nth-child(3) { background-color: #111; }

.blocks-wrapper:nth-child(even) .block:nth-child(1) { background-color: #111; }
.blocks-wrapper:nth-child(even) .block:nth-child(2) { background-color: #222; }
.blocks-wrapper:nth-child(even) .block:nth-child(3) {  }


.blocks-wrapper:nth-child(odd) .block:nth-child(2):hover ~ .hidey,
.blocks-wrapper:nth-child(odd) .block:nth-child(3):hover ~ .hidey {  
  left: 15%;
}

.blocks-wrapper:nth-child(even) .block:nth-child(1):hover ~ .hidey,
.blocks-wrapper:nth-child(even) .block:nth-child(2):hover ~ .hidey {  
  left: 75%;
}

html

<div class="blocks-wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="hidey">testerer</div>
</div><!-- end blocks-wrapper -->
<div class="blocks-wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="hidey">testerer</div>
</div><!-- end blocks-wrapper -->

测试员
测试员

你能发一把小提琴吗？这是一个比较容易想象的标记，你正在与OP的副本工作没有提供任何标记，你怎么能确定这是他们想要的？我不告诉确切的方式。我只是想传达一种方法。当然有多种方法，这只是另一种方法。：）事实上，这正是我想要的！非常感谢。非常感谢。不知怎的，我跳过了它，但我一定会尝试它的，我做到了，但由于某种原因，它不起作用…就像一个魅力！非常感谢。

.item:hover col-hover {
  left: 100%;
}

.item:hover.indent .col-hover {
  left: -50%;
}

.blocks-wrapper {
    font-size: 0;
    margin-bottom: 10px;
    position: relative;
    text-align: center;
}

.block {
  display: inline-block;
  height: 200px; width: 200px;
}

.hidey {
  font-size: 15px;
  z-index: -1;
  color: red;
  position: absolute;
  left: 50%;
  top: 50%;  bottom: 50%;
  transition: all 1s ease;
}

.blocks-wrapper:nth-child(odd) .block:nth-child(1) {  }
.blocks-wrapper:nth-child(odd) .block:nth-child(2) { background-color: #222; }
.blocks-wrapper:nth-child(odd) .block:nth-child(3) { background-color: #111; }

.blocks-wrapper:nth-child(even) .block:nth-child(1) { background-color: #111; }
.blocks-wrapper:nth-child(even) .block:nth-child(2) { background-color: #222; }
.blocks-wrapper:nth-child(even) .block:nth-child(3) {  }


.blocks-wrapper:nth-child(odd) .block:nth-child(2):hover ~ .hidey,
.blocks-wrapper:nth-child(odd) .block:nth-child(3):hover ~ .hidey {  
  left: 15%;
}

.blocks-wrapper:nth-child(even) .block:nth-child(1):hover ~ .hidey,
.blocks-wrapper:nth-child(even) .block:nth-child(2):hover ~ .hidey {  
  left: 75%;
}

<div class="blocks-wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="hidey">testerer</div>
</div><!-- end blocks-wrapper -->
<div class="blocks-wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="hidey">testerer</div>
</div><!-- end blocks-wrapper -->