Question

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

我用“黑细胞”，“灰细胞”和“白细胞”等类制作了div，并按照他们的方式对它们进行了排序。白色单元具有负z-index，并向左（奇数行）或右（偶数行）移动33％。这样，它们在灰色或黑色细胞下保持不可见。

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

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

，但是当我尝试在偶数行中使用白色单元格做同样的事情时会出现问题，因为HTML结构不同（白色单元格 - 黑色单元格 - 灰色单元格）并且我无法定位前一个div。

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

那么，有没有办法在没有flexbox的情况下改变元素的顺序，或者用CSS / SASS来定位前一个div？

Answer 1

在您引用的网站中，两种效果的结构似乎相同（向左移动并向右移动）。

<div class="item [...]">
      <div class="col [...]">[...]</div>
      <div class="col [...]">[...]</div>
      <div class="col-hover">[...]</div>
</div>

实际上，你可以看到＆＃34; Cycle雇佣＆＃34;效果（第二个），还有另一个＆＃34;缩进＆＃34;行的主容器的类（类＆＃34;项＆＃34;）。

<div class="item indent [...]">[same structure as above]</div>

看起来这个类正在将动画写到左边。

然后，如果你把元素放在＆＃34; col-hover＆＃34;，它会显示＆＃34;绝对＆＃34;位于左侧：50％在课堂内＆＃34;项目＆＃34;。

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

但是，＆＃34; item＆＃34;并且＆＃34;缩进＆＃34;，它被覆盖在左边：0。这样，元素位于中心块下方，这是向右移动的第二个元素，第一个向左移动。

所以＆＃34; item＆＃34;徘徊，＆＃34; col-hover＆＃34;走向右边：

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

但是如果元素具有＆＃34;项目＆＃34;班级也有＆＃34;缩进＆＃34;上课，然后是＆＃34; col-hover＆＃34;向左走：-50％（左边）

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

因此，您可以保持相同的结构并使用您想要移动的元素的绝对位置。我想你已经注意到＆＃34; col-hover＆＃34;对于动画，更改左侧属性使元素移动。

希望这有帮助！

Answer 2

请注意代码有点脏，但它的工作方式与你想要的一样。

<html>
    <head>
        <style type="text/css">
        .box
        {
        	width:200px;
        	height:200px;
        	background:rgba(0,0,0,120);
        	margin:0 auto;
        	color:White;
        }
        .big-box
        {
        	height:200px;
        	width:600px;
        	color:White;    
        	position:absolute;
        	border:1px solid black;
        	z-index:-1;
        	-webkit-transition:all 0.3s;
        }
        .big-box1
        {
        	top:0px;
        	left:-200px;
        	text-align:right;
        }
        .big-box2
        {
        	top:200px;
        	left:200px;
        	text-align:left;
        }
        .big-box > .box
        {
        	display:inline-block;
        }
        .par
        {
        	position:relative;
        	height:400px;
        	width:600px;
        	margin:0 auto;
        	border:1px solid black;
        	overflow:visible;
        }
        .b1:hover~.big-box1
        {
        	left:0px;
        }
        .b2:hover~.big-box2
        {
        	left:0px;
        }
        </style>
    </head>
    <body>
    <div class="par">
        <div class="box b1">One</div>
        <div class="box b2">Two</div>
        <div class="big-box big-box1">
            <div class="box">OneC</div> 
        </div>
        <div class="big-box big-box2">       
            <div class="box">TwoC</div>
        </div>
    </div>
    </body>
</html>

Answer 3

为了热身这个问题一直在搞乱，但是我没有完全考虑过，但是如果有一些帮助我会发布。

<强>拨弄

https://jsfiddle.net/Hastig/7Lb427m4/2/

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

Answer 4

尝试使用上一个兄弟选择器〜

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

当鼠标悬停在前一个div上时，CSS移动元素

4 个答案: