title: Can't get div to appear when hovering over another div
body: <p>I apologize for posting a question that should be answered by the other threads, but after the last hour of trying solutions already provided with no success I have to assume my coding in another location is incorrect. If you would like skip to looking at the project , <strong>I need the #info_area to appear when mousing over the other divs, such as #final_sale.</strong> <strike><a href="http://www.lroydesigns.com/marketing%20funnel/funnel.html" rel="nofollow">link to project</a></strike></p>
  
  <p>the css looks like this</p>
  
  <pre><code>#final_sale {
     width: 474px;
     position: absolute;
     top: 691px;
     left: 5px;
     transition: width 1s, height 1s;
     -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
  }
  #final_sale:hover {
     width: 575px;
     position:absolute;
     top:691px;
     left:5px;    
  }
  </code></pre>
  
  <p>The code for all the hover divs looks like this they just have other names than "final_sale".  All of these divs also have a class of "show_info" (.show_info), which you can see in the html below.</p>
  
  <p>Now going off of other posts answered I have the info area like this:</p>
  
  <pre><code>#info_area {
     background-color: #666;
     display: block;
     opacity:0;
     height: 175px;
     width: 325px;
     position: absolute;
     top: 365px;
     left: 397px;
     border: 1px solid;
     box-shadow: 1px 3px 12px;
     transition: opacity .25s ease-in-out;
     -webkit-transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
  }
  .show_info:hover #info_area {
     background-color: #666;
     display: block;
     opacity:0.5;
     height: 175px;
     width: 325px;
     position: absolute;
     top: 365px;
     left: 397px;
     border: 1px solid;
     box-shadow: 1px 3px 12px;
  }
  </code></pre>
  
  <p>I have also tried ".show_info:hover + #info_area"</p>
  
  <p>Here is the HTML, my best guess now is maybe because "info_area" is not nested within one of the other divs, but I have tried that as well and also tried including the main containing div in the CSS.</p>
  
  <p>html</p>
  
  <pre><code>&lt;div id="funnel_container"&gt;
      &lt;!---description blocks----&gt;
          &lt;div id="info_area"&gt;
             info here
          &lt;/div&gt;
      &lt;!---description block end---&gt;
  
      &lt;!-----main mouse over blocks----&gt;
      &lt;div id="leads" class="show_info"&gt;
           &lt;img src="Leads to be qualified(yellow).jpg" alt="leads to be qualified" class="title_block" /&gt;
      &lt;/div&gt;
      &lt;div id="scoring" class="show_info"&gt;
          &lt;img src="scoring and cultivation(blue).jpg" alt="scoring and cultivation" class="title_block" /&gt;
      &lt;/div&gt;
      &lt;div id="sales" class="show_info"&gt;
          &lt;img src="qualified sales lead(red).jpg" alt="qualified sales leads" class="title_block" /&gt;
      &lt;/div&gt;
      &lt;div id="final_sale" class="show_info"&gt;
          &lt;img src="final sale(orange).jpg" alt="Final Sale" class="title_block" /&gt;
      &lt;/div&gt;
  &lt;!---end of main blocks----&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I uploaded the project <strike><a href="http://www.lroydesigns.com/marketing%20funnel/funnel.html" rel="nofollow">HERE</a></strike>, might take a second to load since I have not completely made it web ready due to it not being finished or placed where it will eventually go.</p>
  
  <p>Thank you in advance to anyone who can help, its been driving me crazy all evening and im hoping its something simple I have missed.</p>