用于更改CSS的兄弟级组合器在所有情况下都不能工作。

Question

我有一个问题，关于一个悬停功能，编程来改变宽度的三个div，一旦其中一个div是悬浮。这意味着，如果将first div悬停，则second and third div的宽度也会发生变化，但都具有不同的宽度值。此外，一旦您悬停second div，first and third div也应该改变宽度。对于第三个div来说，这也应该是一样的。

问题在悬停second div之后就开始了，因为第二个和第三个div只是宽度上的变化，而不是first div。然后，first div不再改变宽度。一旦悬停在third div上，这个问题就会继续存在，然后两个first and second div的宽度都不会改变，只有third div会改变。

但是，如果您将first div悬停，那么所有其他div都会更改到正确的宽度，这是没有问题的。

为此，我在CSS中使用了兄弟级组合器(~ )。例如，一旦您将div 1悬停，div 2的样式就会使用以下选择器：.tile-1:hover ~ .tile-2进行更改。

请在CodePen或以下查看我的代码：

<div class="tile tile-1"></div>
<div class="tile tile-2"></div>
<div class="tile tile-3"></div>

<style>
/* simple styling */
.tile {
  background-color: #000;
  width: 200px;
  height: 100px;
  border-style: solid;
  border-color: white;
}

/* tile 1 */
.tile-1:hover {
  width: 250px;
}

.tile-1:hover ~ .tile-2 {
  width: 300px;
}

.tile-1:hover ~ .tile-3 {
  width: 350px;
}

/* tile 2 */
.tile-2:hover ~ .tile-1 {
  width: 350px;
}

.tile-2:hover {
  width: 300px;
}

.tile-2:hover ~ .tile-3 {
  width: 250px;
}

/* tile 3 */
.tile-3:hover ~ .tile-1 {
  width: 300px;
}

.tile-3:hover ~ .tile-2 {
  width: 250px;
}

.tile-3:hover {
  width: 350px;
}
</style>

我希望任何人都能通过让选择器.tile-2:hover ~ .tile-1、.tile-3:hover ~ .tile-1和.tile-3:hover ~ .tile-2工作来帮助您，因为在当前的代码中，它们的宽度值是不应用的。

Answer 1

来自W3School

element1 ~ element2 选择器匹配在element2前面出现的element1.。

示例:

​

div {
  width: 100px;
  height: 50px;
  border: 1px solid;
  margin-bottom:5px;
}

p~div {
  background: red;
}

<div></div>
<div></div>
<div></div>
<p>P Element to use for p ~ div</p>
<div></div>
<div></div>
<div></div>

​

正如你所看到的，它只选择了所有的元素，你可能想要重新思考你的方法来实现你想要的任何东西。

Answer 2

css中的级联表示元素只能直接影响它旁边或下面的元素。但它只朝一个方向，向下。同级选择器选择在同一级别上的选择器，这些选项列在同级之后。SO2可以影响2和3，但不能影响1。

一种方法就是使用flex。

​

.gallery-content{
  overflow:hidden;
  margin-top: 45px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.gallery-content .col{  
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  min-height: 250px;
  background-size: cover;
  background-position: center center;
  transition: .3s;
  background-image:url(https://www.fillmurray.com/300/200);
}
.gallery-content .col:hover{
  transition: .5s;  
  flex-grow: 1.5;
  cursor: pointer;
}

<div class="gallery-content">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

​