Question

我有一个制作两个物体的问题，当我将鼠标悬停在其中一个物体上时，它会改变一个物体。例如，我有对象bar1，bar2和bar3。我想在我将鼠标悬停在bar1或bar3上时会改变bar2.this是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上而不是bar3来影响bar2。每个人都请帮助我。并感谢您的帮助。

Answer 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或.bar2才会选择.bar3。

对于元素处于不同的顺序可能会有更多的语义意义，但在很多情况下（例如你的），即使顺序改变，结果在视觉上也是一样的。如果你不能改变顺序以便以这种方式选择东西，那么你将不得不求助于javascript来选择之前的相邻元素。

有人谈到在css4中有一个父选择器。那会很好:)）

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

1 个答案: