title: using CSS to show subclass on mouse hover
body: <p>I'm trying to show a div by its subclass name on hover using CSS but can't seem to work properly. When the user hovers over <code>hover_group</code>'s <code>myhover</code> class, the hidden_info should display.</p>
  
  <p>I've tried using <code>+</code> or <code>~</code> CSS selectors as well but it doesn't seem to function..what am I doing wrong?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  
      &lt;style&gt;
  
          .hidden_info {
              display:none;
          }
  
          .hover_group .myhover:hover{
              background-color: yellow;
  
              //.hidden_info {
                //  background-color: red;
                  //display:block;
              //}
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
  &lt;div class="hover_group"&gt;
      &lt;ul&gt;
          &lt;li class="myhover"&gt;
              &lt;div class="myhover"&gt;hover here!&lt;/div&gt;
              &lt;div class="hidden_info"&gt;Hello world!&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="myhover"&gt;
              &lt;div class="myhover"&gt;hover here!&lt;/div&gt;
              &lt;div class="hidden_info"&gt;Hello world!&lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="myhover"&gt;
              &lt;div class="myhover"&gt;hover here!&lt;/div&gt;
              &lt;div class="hidden_info"&gt;Hello world!&lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>