Make a Div Appear on Hover Over Another Div

Make a div appear on hover over another div

Replace

#content:hover + #hoverbar{
    visibility:visible;
}

with

#content:hover > #hoverbar{
    visibility:visible;
}

#content:hover #hoverbar{
    visibility:visible;
}

The plus sign '+' is for siblings. In your case the div is nested.

Here the updated jsfiddle

Using only CSS, show div on hover over another element

You can do something like this:

div {    display: none;}    a:hover + div {    display: block;}

<a>Hover over me!</a><div>Stuff shown on hover</div>

How to display a div on hover on another div

You want one of the sibling selectors. General sibling ~ or next sibling +

.ClildDiv1:hover ~ .ChildDiv2 {
    display: block;
}

See fiddle here

Or, the parent hover for any child div would be

.Parent:hover > div {
  display: block;
}

Display a DIV on hover, over but within another DIV which is hovered over. With CSS

You can use position property like this:

Html

<div class="book">
  <div class="info">More info here</div>
  <div class="image">
      Image here
  </div>
</div>

CSS

.book {
  position:relative;
}
.info {
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  display:none;
}
.book:hover .info{
  display:block;
}

The demo http://jsfiddle.net/6ReTK/10/

To get some effect you can use Jquery Fading methods or use CSS transitions:

info {
  transition:opacity 1s;
  opacity:0;
}
.book:hover .info{
  opacity:1;
}

Another demo http://jsfiddle.net/6ReTK/12/

Show div on hover another div

<!DOCTYPE html>
<html>
  <head>
    <style>
      #main {
        position: relative;
      }
      .hide {
        display: none;
        position: absolute;
        left: 40%;
        background: rgb(90, 13, 13);
      }

      .myDIV:hover + .hide {
        display: block;
        color: red;
      }

      .myDIV {
        border: 2px solid;
        background: rgb(202, 100, 100);
        cursor: pointer;
        height: 15vh;
        width: 97px;
        display: block;
        margin: auto;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div class="myDIV">Hover over</div>
      <div class="hide">
        <p>Lorem ipsum dolor sit.</p>
        <hr />
        <p>Lorem ipsum dolor sit.</p>
      </div>
    </div>
  </body>
</html>