Question

我有3个框，看起来像示例中的那个。当用户将鼠标悬停在某个框上时，我想在非悬停框中应用某种样式（框总是兄弟姐妹）。

以下是它应该如何运作 -

将鼠标悬停在方框1上 - 方框2和方框3应为灰色
将鼠标悬停在方框2上 - 方框1和方框3应为灰色
将鼠标悬停在方框3上 - 方框1和方框2应为灰色

＆＃13;

.test {
  width: 100px;
  background-color: #009AFD;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
  text-align: center;
}
.test:hover ~ .test {
  width: 100px;
  background-color: #ddd;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
  text-align: center;
}

＆＃13;

<div class="test">
  Box 1
</div>
<div class="test">
  Box 2
</div>
<div class="test">
  Box 3
</div>

＆＃13;

我可以让它适用于Box 1.有人可以帮助我如何优雅地为Box 2和3做这件事。

注意：不应该使用jQuery或Javascript（在这种情况下这将是一个小步骤）。

Answer 1

你不能用当前的CSS选择器选择“向上”，所以2和3是不可能的 - 不是直接的。您可以将所有元素放入一个公共容器元素中，当它悬停时，将所有框都设置为灰色，然后实际的框再次悬空：

.test {
    width: 100px;
    background-color: #009AFD;
    height: 100px;
    display: inline-block;
    margin-right: 5px;
    text-align: center;
}
.container:hover .test {
    background:#ddd;
}
.container .test:hover {
    background-color: #009AFD;
}

<div class="container">
    <div class="test">Box 1</div>
    <div class="test">Box 2</div>
    <div class="test">Box 3</div>
</div>

（不需要顺便重复在悬停状态下保持不变的所有属性。）

然而，当你没有直接悬停其中一个方框时，这也将应用悬停效果，但当容器元素悬停在方框之间的边缘时也是如此 - 所以当它们位于方框之间时，它们中的所有三个都将成为灰色。

为了对抗这种效果，你需要有一点创造性：通过不将盒子放在正常的流程中，但绝对定位它们，你可以使容器元素根本不占用任何空间，所以它赢得了'徘徊在盒子之间的“边缘”。然而，将盒子自身悬停仍然会触发容器元素的:hover，因为盒子是它的子元素，因此将它们悬停在一起也意味着将父元素悬停，即使父元素不在该空间中“存在”鼠标光标悬停在上面。

.container {
  position: relative;
}
.test {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  background-color: #009AFD;
  height: 100px;
  display: inline-block;
  text-align: center;
}
#box2 {
  left: 110px;
}
#box3 {
  left: 220px;
}
.container:hover .test {
  background: #ddd;
}
.container .test:hover {
  background-color: #009AFD;
}

<div class="container">
  <div class="test" id="box1">Box 1</div>
  <div class="test" id="box2">Box 2</div>
  <div class="test" id="box3">Box 3</div>
</div>

当然，你可能不得不使用一些额外的技巧来保持正常流中的跟随元素在它们将采取的相同位置，如果绝对定位没有将框移出流（就像给下一个元素{{1等等。）

当然，整个事情只能起到“简单”的作用，因为你希望悬停盒子的兄弟姐妹的颜色是一样的。你希望它们有不同的颜色，然后可能需要额外的诡计。

Answer 2

这样做：

＆＃13;

.test {
  width: 100px;
  background-color: #009AFD;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
  text-align: center;
}
.parent:hover > div {
  width: 100px;
  background-color: #ddd;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
  text-align: center;
}
.parent:hover > div:hover {
  background-color: #009AFD;
}

＆＃13;

<div class="parent">
  <div class="test">Box 1</div>
  <div class="test">Box 2</div>
  <div class="test">Box 3</div>
</div>

＆＃13;

将div包含在父div中。使用此选择器可以更改所有子项：.parent：hover＆gt; DIV。而这个选择器可以豁免正在盘旋的孩子：.parent：hover＆gt;格：悬停

Answer 3

.test:hover ~ .test选择跟随悬停的.test元素的兄弟姐妹的.test个元素。

相反，您可以尝试:not()。下面的选择器将匹配所有未悬停的.test元素：

.test:not(:hover)

.test {
  width: 100px;
  background-color: #009AFD;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
  text-align: center;
}
.test:not(:hover) {
  background-color: #ddd;
}

<div class="test">
  Box 1
</div>
<div class="test">
  Box 2
</div>
<div class="test">
  Box 3
</div>

如果您只希望在悬停元素时匹配非悬停元素，则可以使用

:hover > .test:not(:hover)

.test {
  width: 100px;
  background-color: #009AFD;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
  text-align: center;
}
:hover > .test:not(:hover) {
  background-color: #ddd;
}

<div class="test">
  Box 1
</div>
<div class="test">
  Box 2
</div>
<div class="test">
  Box 3
</div>

或者，如果您希望它可以在不支持:not()的旧浏览器上运行，则可以将样式应用于所有元素，然后在hovered元素中重置。

.test {
  /* Set styles for non-hovered */
}
.test:hover {
  /* Set styles for hovered */
}

.test {
  width: 100px;
  background-color: #ddd;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
  text-align: center;
}
.test:hover {
  background-color: #009AFD;
}

<div class="test">
  Box 1
</div>
<div class="test">
  Box 2
</div>
<div class="test">
  Box 3
</div>

.test {
  /* Set styles for non-hovered */
}
:hover > .test:hover {
  /* Set styles for non-hovered when another is hovered */
}
.test:hover {
  /* Set styles for hovered */
}

.test {
  width: 100px;
  background-color: #009AFD;
  height: 100px;
  display: inline-block;
  margin-right: 5px;
  text-align: center;
}
:hover > .test {
  background-color: #ddd;
}
.test:hover {
  background-color: #009AFD;
}

<div class="test">
  Box 1
</div>
<div class="test">
  Box 2
</div>
<div class="test">
  Box 3
</div>

仅限CSS：仅在非徘徊的兄弟姐妹上应用样式

3 个答案: