鼠标悬停以激活另一个div

我得到了这两个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;
}

.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;
}