title: Hover parent div; show text in child div. Do not show text when hover child div
body: <p>Very new to HTML and CSS. I've finally figured out how to hover a div and cause that to show text in another div. But what then happens is when I hover the div where the text appears that too shows the text; which I don't not want.</p>
  
  <pre><code>    &lt;div class="leaf5"&gt;
  
      &lt;img class="leaf-5-about" src="images/Leaf%205%20about.png" onmouseover="this.src='images/Leaf%205%20about%20hover.png'" onmouseout="this.src='images/Leaf%205%20about.png'"&gt;
  
      &lt;div class="cashdup-info"&gt;
  
          &lt;h3 class="cashdup-text"&gt;&lt;i&gt;&lt;span style="font-size: 38px; color: #359869" &gt;CashdUp&lt;/span&gt; is a home budgeting tool that allows you to make every cent count. &lt;/i&gt;&lt;/h3&gt;
  
      &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to hover the div called "leaf5" and have that show text in another div without the text showing up if I hover the actual div the text is contained in. My CSS is as follows:</p>
  
  <pre><code>.cashdup-text {
      font-weight: 100;
      font-size: 22px;
      display: none;    
  }
  
  .leaf5:hover .cashdup-text {
      display: block;        
  }
  </code></pre>
  
  <p>Thanks.</p>