html - 鼠标悬停激活另一个 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>