Question

我试图制作它以便我有2个div，一个在屏幕的顶部有一个名字，一个在屏幕的底部有一些按钮。如果你将鼠标悬停在1个div上，它们都应该可见。我发现使用+和〜来使第二个显示在悬停在第一个div上时，但无法找到任何方法来反过来。这就是我现在所拥有的：http://codepen.io/anon/pen/ojpqao

HTML：

<div class="bg">
  <div class="topbar"></div>
  <div class="bottombar"></div>
</div>

的CSS：

.bg {
  background-color: red;
  width: 200px;
  height: 200px;
}

.topbar {
  width: 200px;
  height: 20px;
  background-color: green;
}

.bottombar {
  width: 200px;
  height: 20px;
  background-color: green;
  top: 180px;
  position: absolute;
}

.topbar:hover, .bottombar:hover, .topbar:hover + .bottombar {
  background-color: blue;
}

Answer 1

不幸的是我认为没有CSS解决方案，请参阅[此页]（Is there a "previous sibling" CSS selector?）

您可能需要在Javascript

中执行此操作

Answer 2

我会稍微改变你的标记，因为无论如何你的底栏都是绝对定位的：

<div class="topbar">
    <div class="bottombar"></div>
</div>

然后你可以这样做：

.topbar:hover,
.topbar:hover .bottombar {
    background-color: blue;
}

http://codepen.io/inorganik/pen/gaoeEQ

如何＆＃34;链接＆＃34; 2个divs的悬停状态

2 个答案: