title: Display DIV on hover over another DIV
body: <p>I've found the solution I am looking for on SoF but the issue persists. I'm obviously not doing something correctly.  Perhaps another pair of eyes would be helpful.</p>
  
  <p>Basically, I want to show a hidden div while I hover over a separate div. While on hover over the separate div, it will change bg color.</p>
  
  <p>Thanks for the help.  </p>
  
  <p>Here is a <a href="http://codepen.io/koriwade/pen/PzvXPQ?editors=1100" rel="nofollow">CodePen</a> of what I have so far.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="image"&gt;
      &lt;div class="one"&gt;&lt;/div&gt;
      &lt;div class="two"&gt;&lt;/div&gt;
      &lt;div class="three"&gt;&lt;/div&gt;
      &lt;div class="four"&gt;&lt;/div&gt;
      &lt;div class="five"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="one-text"&gt;
      &lt;p&gt;Here is some text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="two-text"&gt;
      &lt;p&gt;Here is some text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="three-text"&gt;
      &lt;p&gt;Here is some text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="four-text"&gt;
      &lt;p&gt;Here is some text&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="five-text"&gt;
      &lt;p&gt;Here is some text&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
    background-color: #c5d5cb;
    color: #fff;
    font-family: Open Sans;
    font-weight: 300;
    margin: 0 auto;
  }
  
  .container-fluid {
    background-color: #9fa8a3;
    height: 600px;
    padding: 30px;
  }
  .container-fluid .image {
    background-color: #e3e0cf;
    height: 100%;
    width: 50%;
    float: right;
    padding: 30px;
    display: flex;
    justify-content: space-between;
  }
  .container-fluid .image .one {
    background-color: #c5d5cb;
    width: 100px;
    height: 100px;
    margin: 5px;
  }
  .container-fluid .image .one:hover {
    background-color: #3b3a36;
  }
  .container-fluid .image .two {
    background-color: #c5d5cb;
    width: 100px;
    height: 100px;
    margin: 5px;
  }
  .container-fluid .image .two:hover {
    background-color: #3b3a36;
  }
  .container-fluid .image .three {
    background-color: #c5d5cb;
    width: 100px;
    height: 100px;
    margin: 5px;
  }
  .container-fluid .image .three:hover {
    background-color: #3b3a36;
  }
  .container-fluid .image .four {
    background-color: #c5d5cb;
    width: 100px;
    height: 100px;
    margin: 5px;
  }
  .container-fluid .image .four:hover {
    background-color: #3b3a36;
  }
  .container-fluid .image .five {
    background-color: #c5d5cb;
    width: 100px;
    height: 100px;
    margin: 5px;
  }
  .container-fluid .image .five:hover {
    background-color: #3b3a36;
  }
  .container-fluid .one-text {
    width: 300px;
    display: block;
    float: right;
    display: none;
  }
  .container-fluid .two-text {
    width: 300px;
    display: block;
    float: right;
    display: none;
  }
  .container-fluid .three-text {
    width: 300px;
    display: block;
    float: right;
    display: none;
  }
  .container-fluid .four-text {
    width: 300px;
    display: block;
    float: right;
    display: none;
  }
  .container-fluid .five-text {
    width: 300px;
    display: block;
    float: right;
    display: none;
  }
  .container-fluid .one:hover + .one-text {
    display: block;
  }
  .container-fluid .two:hover + .two-text {
    display: block;
  }
  .container-fluid .three:hover + .three-text {
    display: block;
  }
  .container-fluid .four:hover + .four-text {
    display: block;
  }
  .container-fluid .five:hover + .five-text {
    display: block;
  }
  </code></pre>