title: Affecting child elements by modifying the parent by CSS. is it possible?
body: <p>Maybe it's a silly question, but I'm sure it will be useful for many of beginners. I have constructed a code. What I'm trying to do is to display the text (in <code>&lt;p&gt;</code> tags) which is currently hidden, only when the actual <code>&lt;a&gt;</code> is hovered. Is this possible without js? Can it be done by operating on css / html only?
  the html code is here:</p>
  
  <pre><code>                &lt;div class="promo2"&gt;
                      &lt;a href="speakers-hire.html"&gt;
                          &lt;div class="promo2a"&gt;
                              &lt;p&gt;SPEAKERS&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
  
                      &lt;a href="decks-hire.html"&gt;
                           &lt;div class="promo2a"&gt;
                              &lt;p&gt;CD PLAYERS&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
  
                  &lt;/div&gt; 
  </code></pre>
  
  <p>and the css which correspond to the above html:</p>
  
  <pre><code>.promo2a:hover{
  background:url(../_images/generic/glass5.png);
  display:inline-block;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>.promo2a p{
  display:none;
  </code></pre>
  
  <p>}</p>
  
  <p>So basically I want the text in <code>&lt;p&gt;</code> to be displayed when the whole div <code>promo2a</code> is hovered.</p>
  
  <p>Any help is kindly appreciated. Thank you in advance.</p>