纯CSS，div hover可以影响多个元素

Question

我可以在悬停另一个 div 元素时更改 div 元素的大小，例如这个例子。 https://jsfiddle.net/9510a6kj/

 .left, .right{
        float:left;
    }

    .left{
        background: red;
        width: 200px;
        height: 300px;
        transition: width 1s ;
    }

    .right{
        background: blue;
        width: 300px;
        height: 300px;
        transition: width 1s;
    }

    .left:hover{
        width: 300px;
    }

    .left:hover + .right{
        width: 100px;
    }
    </style>

但是当悬停第一个元素时，可以改变两个不同 div 元素的大小。

例如在鼠标悬停 div "a" 时，改变 div "b" 和 div "c" 的大小。

谢谢。

Answer 1

是的，使用兄弟选择器（如果它们是兄弟）

.a {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: red;
}

.b {
  display: inline-block;
  width: 100px;
  height: 30px;
  background-color: blue;
  transition: all 1s;    }

.c {
  display: inline-block;
  width: 100px;
  height: 80px;
  background-color: yellow;
  transition: all 1s;
}

.a:hover~.b {
  height: 160px;
}

.a:hover~.c {
  height: 120px;
}

<div class="a">hover me</div>
<div class="b">b b b b b</div>
<div class="c">c c c c c</div>

Answer 2

是的，您可以使用兄弟选择器来做到这一点。虽然您在小提琴中使用的相邻兄弟选择器将为 DOM 中紧随其后的元素设置样式，但兄弟选择器将设置所有兄弟元素的样式只要它们跟随.a。

HTML

<div class="parent">
   <div class="a"></div>
   <div class="b"></div>
   <div class="c"></div>
</div>

CSS

.a:hover ~ div{
 //style .b and .c here
}

请注意，兄弟选择器仅适用于后面的兄弟...它不适用于参考元素之前的兄弟。 CSS 还不能回溯到 DOM 树。

Answer 3

这完全取决于这些元素之间的关系。

1. 如果他们是兄弟姐妹并且一个接一个地使用 + 也用于 c div 。见下文

div {
  height: 50px;
  width: 50px;
  border: 1px solid black
}

.a:hover + .b {
  background: blue;
}

.a:hover + .b + .c {
  background: red;
}

<div class="a">
  a
</div>
<div class="b">
  b
</div>
<div class="c">
  c
</div>

2.如果他们是兄弟姐妹并且b和c都在之后 a，但不是一个接一个，使用~

div {
  height: 50px;
  width: 50px;
  border: 1px solid black
}

.a:hover ~ .b {
  background: blue;
}

.a:hover ~ .c {
  background: red;
}

<div class="a">
  a
</div>
<div>

</div>
<div class="b">
  b
</div>
<div>

</div>
<div class="c">
  c
</div>

3. 如果b 和c 在之后 a 但不是在之后，但c 在b 之后，你可以使用~ 和+

div {
  height: 50px;
  width: 50px;
  border: 1px solid black
}

.a:hover ~ .b {
  background: blue;
}

.a:hover ~ .b + .c {
  background: red;
}

<div class="a">
  a
</div>
<div>

</div>
<div class="b">
  b
</div>
<div class="c">
  c
</div>

4. 如果他们是孩子，你可以使用a:hover b,a:hover c 或>（直接孩子）然后你可以添加上面的兄弟选择器。

正如我所说，有很多可能性。这完全取决于结构。 但是如果在 dom 树中 b 和 c 在 a 之后，您只能使用 CSS 执行此操作。