鼠标悬停以激活另一个div

Question

我得到了这两个div。

当第一个div（红色）悬停它时，我需要弹出第二个div（蓝色），现在只有当指针触摸隐藏的第二个div时才会出现。

http://codepen.io/IvanPalma/pen/XXpwoW?editors=110

.first-div { 
  background-color: red;
  height: 300px;
  width: 300px;
}

.second-div {
  background-color: blue;
  height: 200px;
  width: 100px;
  position: absolute;
  left: 250px;
  opacity:0;
}
.second-div {
  background-color: blue;
  height: 200px;
  width: 100px;
  position: absolute;
  left: 250px;
  opacity:0;
}

.second-div:hover {
  opacity:1;
}

<div class="first-div">
<div class="second-div">
</div>
</div>

Answer 1

将您的上一个选择器更改为：

.first-div:hover > .second-div {
  opacity:1;
}

.first-div { 
  background-color: red;
  height: 300px;
  width: 300px;
}

.second-div {
  background-color: blue;
  height: 200px;
  width: 100px;
  position: absolute;
  left: 250px;
  opacity:0;
}
.second-div {
  background-color: blue;
  height: 200px;
  width: 100px;
  position: absolute;
  left: 250px;
  opacity:0;
}

.first-div:hover > .second-div {
  opacity:1;
}

<div class="first-div">
<div class="second-div">
</div>
</div>

Answer 2

那是因为在你的css代码中，你说当你的鼠标悬停在第二个div上时你想让第二个div可见。
我相信当你将鼠标悬停在第一个div上时你想要弹出？如果是这样，请更改.second-div：hover to .first-div：hover