将两个对象悬停在一个对象上

【问题标题】：hover two objects affecting on one object将两个对象悬停在一个对象上
【发布时间】：2013-11-21 15:52:30
【问题描述】：

我在制作两个对象时遇到问题，当我将鼠标悬停在其中一个上时，它会改变一个对象。例如，我有对象 bar1、bar2 和 bar3。我想当我将鼠标悬停在 bar1 或 bar3 上时会更改 bar2。这是 css 代码：

.bar2{
   left:0.5%;
   right:0.5%;
}
.bar1:hover + .bar2{left:5%;}
.bar3:hover + .bar2{right:5%;}

这是我的html代码：

<div style="position:absolute;">
    <div class="bar1">
    </div>
    <div class="bar2">
    </div>
    <div class="bar3">
    </div>
</div>

从该代码中，我可以通过将鼠标悬停在 bar1 上来影响 bar2，但不能通过 bar3 来影响。请每个人帮助我。并感谢您的帮助。

【问题讨论】：

你应该总是尝试在 jsbin.com 上包含一个演示或类似的东西，请以可读的方式格式化你的 css，你不需要包含所有不是直接的 css与您的问题相关。你让别人帮助你变得更加困难。

标签： css hover effects

【解决方案1】：

你需要做的是这样的：live demo here (click).

<div class="bar1">Bar 1
</div>
<div class="bar3">Bar 3
</div>
<div class="bar2">Bar 2
</div>

css:

#one {
  background: red;
}
#two {
  background: white;
}
#three {
  background: blue;
}

#one:hover ~ #two, #three:hover ~ #two {
  background: black;
}

.bar3:hover + .bar2 或 .bar3:hover ~ .bar2 只会在 .bar2 是 AFTER .bar3 时选择 .bar2。

元素以不同的顺序排列可能更具语义意义，但在很多情况下（例如您的情况），即使更改了顺序，结果在视觉上也是相同的。如果您无法更改顺序以便以这种方式选择事物，那么您将不得不求助于 javascript 来选择先前的相邻元素。

在 css4 中有一个父选择器的讨论。那会很好:)

【讨论】：