Need to display a div on hover of other div

Question

I have an element set to visibility:hidden and i need it to change to visible on hover, i tried this with javascript with no luck

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

already tried it but didn't work since pic-1 is not inside or in the same div as option-1 — eliteware, Jan 27 '15 at 19:21
You can do it using only css. Here is an example: http://stackoverflow.com/questions/5210033/show-div-on-hover-with-only-css — ZeekIFJ, Jan 27 '15 at 19:38
@ZeekIFJ No, he can't do this with CSS because `#option-1` is a child of `#pic-1`'s sibling. Even with Selectors Level 4 gets implemented, CSS still won't be able to use the parent selector; DOM traversal with JavaScript will be required. — TylerH, Jan 27 '15 at 19:43

score 2 · Answer 1 · answered Jan 27 '15 at 19:25

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

codepen link: http://codepen.io/anon/pen/bNrdrN

it is not working for you on your browser? did it work in codepen ? — Ji_in_coding, Jan 27 '15 at 19:37

Need to display a div on hover of other div

1 Answers1