javascript - 需要在其他 div 悬停时显示一个 div

Question

我有一个元素设置为 visibility:hidden 并且我需要它在悬停时变为可见，我用 javascript 尝试了这个但没有成功

HTML

<div class="options">
  <div id="option-1" onmouseover="dis()"></div>
  </div>
</div>
<div id="pic-1"></div>

CSS

#option-1{
  width:100px;
  height:20px;
  background:#fff;
  position:relative;
  z-index:999;
  top:0;left:0;
}
#pic-1{
  width:100%;
  height:100%;
  position:absolute;
  z-index:99;
  background:#f0f;
  visibility:hidden;
}

Javascript

function dis(){
  document.getElementById("pic-1").style.visibility = "visible";
}

Answer 1

html:

<div class="options">
  <div id="option-1" onmouseover="showx();"  onmouseout="hidex();"></div>
  </div>
</div>
<div id="pic-1"></div>

CSS:

#option-1{
  width:100px;
  height:100px;
  background-color:red;
  cursor: pointer;
}
#pic-1{
  width:100%;
  height:100%;
  position:absolute;
  z-index:99;
  background:#f0f;
  visibility:hidden;
}

js

function showx(){
  document.getElementById("pic-1").style.visibility = "visible";
}

function hidex(){
  document.getElementById("pic-1").style.visibility = "hidden";
}

代码笔链接:http://codepen.io/anon/pen/bNrdrN