html - 如何 "link"2 div的悬停状态

Question

我试图让它有 2 个 div，一个在屏幕的顶部有一个名字，一个在屏幕的底部有一些按钮。如果您将鼠标悬停在其中一个 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

我只是稍微更改一下您的标记，因为无论如何您的底部栏都是绝对定位的:

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

然后你可以这样做:

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

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